解决img对大部分CSS样式不支持的有关问题-HTML教程-爱易网页

解决img对大部分CSS样式不支持的有关问题

日期：2014-05-17　浏览次数：20588 次

解决img对大部分CSS样式不支持的问题

主要参考：

http://webdesignerwall.com/demo/css3-image-styles/

http://www.qianduan.net/css3-image-styles.html

详情到上面两个连接看。

主要自己整理一下，顺便把jQuery的代码专为JavaScript，做个备忘。

DEMO:http://jsfiddle.net/QkRKC/embedded/result/

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
    function changeImg(e) {
        var img = e.target,
            imageWarp = document.createElement("span");
        imageWarp.className = "image-wrap " + img.className;
        imageWarp.style.cssText = "position:relative; display:inline-block; background:url(" +  img.src 
            + ") no-repeat center center; width:" + img.width + "px; height:" + img.height + "px;"
        img.insertAdjacentElement("beforebegin", imageWarp);
        imageWarp.appendChild(img);
    }

    document.addEventListener("DOMContentLoaded", function() {
        var imgs = document.querySelectorAll("img"),
        length = imgs.length;
        
        for(var i = 0; i < length; i++) {
            imgs[i].style.opacity = 0;
            imgs[i].onload = changeImg;
        }
    }, false);
</script>
<style>
    body {
        width:480px;
        margin:0 auto;
    }
    div {
        text-align:center;
        margin-bottom:20px
    }

    /* NORMAL */
    .normal img {
        border: solid 5px #000;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
        -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
        box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
    }

    /* CIRCLE */
    .circle .image-wrap {
        -webkit-border-radius: 50em;
        -moz-border-radius: 50em;
        border-radius: 50em;
    }

    /* PHOTO */
    .card .image-wrap {
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
        -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
        box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

    /* EMBOSSED */
    .embossed .image-wrap {
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
        -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
        box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

    /* SOFT EMBOSSED */
    .soft-embossed .image-wrap {
        -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
        -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
        box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

    /* CUTOUT */
    .cutout {
        background: #222;
        padding: 20px 40px 50px;
        color: #fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

解决img对大部分CSS样式不支持的有关问题

相关资料更多>

推荐阅读更多>