01_CSS3

基础知识

选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

参考手册

E[attr] 表示存在attr属性即可；
E[attr=val] 表示属性值完全等于val，完全匹配

            <div class="wrap-box">
                <a href="./a.rmvb" class="download download-movie">下载</a>
                <a href="./b.rmvb" class="download download-movie">下载</a>
                <a href="./a.mp3" class="download download-music">下载</a>
            </div>

        .wrap-box a[href="./a.rmvb"] {
            color: red;
        }
        .wrap-box a[href="./b.rmvb"] {
            color: pink;
        }
        .wrap-box a[href="./a.mp3"] {
            color: purple;
        }

E[attr~=val] 表示的一个单独的属性值，这个属性值是以空格分隔的，不完全比配

            <div class="wrap-box">
                <a href="./a.rmvb" class="download download-movie">下载</a>
                <a href="./b.rmvb" class="download download-movie">下载</a>
                <a href="./a.mp3" class="download download-music">下载</a>
            </div>

        .wrap-box a[class~="download"] {
            color: red;
        }

E[attr|=val] 表示的要么一个单独的属性值，要么这个属性值是以“-”分隔的

            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="download-movie">下载</a>
                <a href="./a.mp3" class="download-music">下载</a>
            </div>

        .wrap-box a[class|="download"] {
            color: red;
        }

E[attr*=val]表示的属性值里包含val字符并且在“任意”位置

            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>

        .wrap-box a[class*="download"] {
            color: red;
        }

上面都是选中所有（三个）的a标签

E[attr^=val]表示的属性值里包含val字符并且在“开始”位置

            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>

选中第一、第三个a标签

        .wrap-box a[class^="download"] {
            color: red;
        }

E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下载</a>
                <a href="./a.mp3" class="downloadmusic">下载</a>
            </div>

选中第一、第二个a标签

        .wrap-box a[class$="download"] {
            color: red;
        }

伪类选择器

重点理解E是用来参考确定其父元素的，nth-child(n) 对应根据E元素确定的父元素的所有子元素，nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素。（此处要配合案例加强理解）

first

E:first-child 匹配父元素的第一个子元素E。相对于父级做参考，所有子元素的第一个，并且位置要对应（也就是第一个子元素必须是E，如果不是E不生效）
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。相对于父级做参考，所有特定类型（与E同类型）子元素的第一个
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的存在
n遵循线性变化，其取值1、2、3、4、... ，关于n的取值范围：
当n做为一个独立值时，n取值为n>=1，例如：nth-child(n)
当n做一个系数时，n取值为n>=0例如：nth-child(2n+1)、nth-child(-n+5)；

last

E:last-child　　匹配父元素的最后一个子元素E。最后一个子元素必须为E，否则无效
E:last-of-type　　匹配同类型中的最后一个同级兄弟元素E。
E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。

only

E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；
E:only-of-type表示当前以E确定的父元素，除E之外不能包含其它和E同类型的子元素；

其他

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
E:empty 选中没有任何子节点（包括文本结点，如果标签内有文本内容也算）的E元素；

超链接

E:link　　设置超链接a在未被访问前的样式。
E:visited 　　设置超链接a在其链接地址已被访问过时的样式。
E:hover 　　设置元素在其鼠标悬停时的样式。
E:active　　设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。

a:link {}
a:visited {}
a:hover {}
a:active {}

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

伪元素选择器

E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。
":" 与 "::" 区别在于区分伪类和伪元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p::after{
            content: 'after';
            color: red;
        }
        /*:和::都是伪元素，浏览器做了优化*/
        p:before{
            content: 'before';
            color: purple;
        }
        p::selection{//被选中的文本
            background-color: purple;
        }
        input::-webkit-input-placeholder {
            color: #990;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p>这是p,哈哈哈哈 哈哈哈哈哈哈过过过过过</p>
    </div>
    <input type="text" placeholder="这是占位符"/>
</body>
</html>

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，不具有继承性，即不会影响子元素的透明度。
　　Red、Green、Blue、Alpha即RGBA
　　Hue、Saturation、Lightness、Alpha即HSLA
　　R、G、B 取值范围0~255
　　H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
　　S 取值范围0%~100%
　　L 取值范围0%~100%
　　A 取值范围0~1

关于透明度：
opacity子元素会继承父元素的透明度，在实际开发中会带来干扰；
transparent 设置透明度时完全类似于“玻璃”一样的透明；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .layer{
            background: url("images/bg.jpg");
            width: 100%;
            height: 662px;
        }
        img{/*opacity盒子透明度，会被继承*/
            float: left;
            opacity: .5;
        }
        .box1{/*transparent像玻璃一样完全透明*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: transparent;
        }
        .box2{/*rgba*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: rgba(255,0,0,.5);
        }
        .box3{/*hsla*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: hsla(0,10%,10%,0.3);
        }
    </style>
</head>
<body>
    <div class="layer">
        ![](images/layer.jpg)
        <div class="box1">第一个盒子</div>
        <div class="box2">第二个盒子</div>
        <div class="box3">第三个盒子</div>
    </div>
</body>
</html>

文本

文字阴影与边框阴影相似，可分别设置偏移量、模糊度、颜色（可设透明度）。
　　单行文本溢出，需要配合overflow:hidden; white-space: nowrap;

难理解的点：
　　自已要多试着理解一下关于white-space的各个属性值之间的差异；
　　上述方法只能解决单行文本的溢出问题，多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成，可自行尝试。
　　多行文本文字溢出处理，非标准属性，可应用于移动端

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            font-size: 40px;
            /*
                水平偏移值
                垂直偏移值
                模糊值
                颜色
            */
            text-shadow: 5px 3px 4px red;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            /*word-break:break-all;*/
            word-wrap: break-word;
        }
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            white-space: pre;/*保留空格不换行*/
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            white-space: pre-wrap;/*保留空格并换行*/
        }
        .box3{
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            white-space: pre-line;/*保留换行，不保留空格*/
        }
        .box4{
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            white-space: nowrap;/*强制不换行，不保留空格*/
        }
        .p1{/*单行文本显示不下时，用...代替*/
            width: 200px;
            border: 1px solid #cccccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .p2{
            width: 200px;
            border: 1px solid #cccccc;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:4;
        }
    </style>
</head>
<body>
    <span>你哈哈哈，空间换个那就不发个，你们开黑</span>
    <p class="box">
        这是文字,http：//www.124.com
    </p>
    pre
    <p class="box1">
        这是文字,http：//www.124.com
    </p>
    pre-wrap
    <p class="box2">
        这是文字,http：//www.124.com
    </p>
    <p class="box3">
        这是文字,
        http：//www.124.com
    </p>
    <p class="box4">
        这是文字,
        http：//www.124.com
    </p>

    <div class="div1">
        <p class="p1">在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现: 但是在不支持html5的低版本的浏览器中</p>
    </div>
    <div class="div2">
        <p class="p2">在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现: 但是在不支持html5的低版本的浏览器中,里面或者写到其他的标签里面,但是富文本编辑器可不怎么买账了</p>
    </div>
</body>
</html>

边框

其边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

例：边框圆角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #F7F7F7;
        }
        .wrap{
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        header{
            padding: 20px 0;
            text-align: center;
            margin-bottom: 20px;

        }
        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }
        .main .item{
            width: 210px;
            height: 210px;
            background-color: #fff;
            float: left;
            margin: 0 30px 30px 0;
            box-shadow: 2px 2px 5px #ccc;
            position: relative;
            display: flex;
        }
        .main .item:after{
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            font-family: "微软雅黑";
            font-size: 18px;
            background-color: rgba(170,170,170,0);
            transition: all 0.3s ease-in;
            z-index: -1;
        }
        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }
        /*从左上角开始顺时针，1,2,3,4*/
        .border-radius{
            width: 180px;
            height: 180px;
            margin: auto;
            border: 1px solid red;

        }
        .item:nth-child(1) .border-radius{
            border-radius: 50%;
        }
        .item:nth-child(2) .border-radius{
            border-radius: 90px 90px 0 0;
        }
        .item:nth-child(3) .border-radius{
            height: 90px;
            border-radius: 90px 90px 0 0;
        }
        .item:nth-child(4) .border-radius{
            border-radius: 90px 0 0 0;
        }
        .item:nth-child(5) .border-radius{
            width: 90px;
            height: 90px;
            border-radius: 90px 0 0 0;
        }
        .item:nth-child(6) .border-radius{
            height: 90px;
            /*这里不能用固定值*/
            /*border-radius: 50%;*/
            border-radius: 90px / 45px;
        }
        .item:nth-child(7) .border-radius{
            width: 90px;
            border-radius: 45px / 90px;
        }
        .item:nth-child(8) .border-radius{
            height:  45px;
            border-radius: 90px 90px 0 0 / 45px 45px 0 0;
        }
        .item:nth-child(9) .border-radius{
            width:  45px;
            border-radius: 45px 0 0 45px / 90px 0 0 90px;
        }
        .item:nth-child(10) .border-radius{
            width:  45px;
            height: 90px;
            border-radius: 45px 0 0 0 / 90px 0 0 0;
        }
        .item:nth-child(11) .border-radius{
            width:  50px;
            height: 50px;
            border: 70px solid red;
            border-radius:100px;
        }
        .item:nth-child(12) .border-radius{
            width:  50px;
            height: 50px;
            border: 70px solid red;
            border-radius:50px;
        }
        .item:nth-child(13) .border-radius{
            width:  50px;
            height: 50px;
            border: 70px solid red;
            border-radius:90px 0 0 0;
        }
        .item:nth-child(14) .border-radius{
            width:  50px;
            height: 50px;
            border: 70px solid red;
            border-radius:90px 0 90px 0;
        }
        .item:nth-child(15) .border-radius{
            width:  0px;
            height: 0px;
            border-style: solid;
            border-width: 90px;
            border-color: red blue yellow green;
        }
        .item:nth-child(16) .border-radius{
            width:  0px;
            height: 0px;
            border-style: solid;
            border-width: 90px;
            border-color: red blue yellow green;
            border-right-color: transparent;
        }
        .item:nth-child(17) .border-radius{
            width:  0px;
            height: 0px;
            border: 90px solid red;
            border-right-color: transparent;
            border-radius: 50%;
        }
        .item:nth-child(18) .border-radius{
            width:  0px;
            height: 0px;
            border: 90px solid transparent;
            border-right-color: red;
            border-radius: 50%;
        }
        .item:nth-child(19) .border-radius{
            width:  180px;
            height: 0px;
            border-style: solid;
            border-top-width: 90px;
            border-bottom-width: 90px;
            border-top-color: red;
            border-bottom-color: blue;
            border-radius: 50%;
        }
        .item:nth-child(20) .border-radius{
            width:  180px;
            height: 90px;
            border-style: solid;
            border-bottom-width: 90px;
            border-bottom-color: green;
            background-color: red;
            border-radius: 50%;
        }
        .item:nth-child(21) .border-radius{
            width:  180px;
            height: 90px;
            background-color: red;

            border-bottom-width: 90px;
            border-bottom-color: blue;
            border-bottom-style: solid;
            border-radius: 50%;
            position: relative;
        }
        .item:nth-child(21) .border-radius::after,
        .item:nth-child(21) .border-radius::before{
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border-width: 35px;
            border-style: solid;
            border-radius: 45px;
        }
        .item:nth-child(21) .border-radius::after{
            background-color: red;
            border-color: blue;
        }
        .item:nth-child(21) .border-radius::before
        {
            background-color: blue;
            border-color: red;
            right: 0;
        }
        .item:nth-child(22) .border-radius
        {
            width: 160px;
            height: 70px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }
        .item:nth-child(22) .border-radius::after{
            content: '';
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent;
            border-right-color: red;
            position: absolute;
            left: -20px;
            top: 24px;
        }
        .item:nth-child(23) .border-radius{
            width: 40px;
            height: 40px;
            border-color: red;
            border-style: solid;
            border-width: 45px 0 45px 70px;
            border-radius: 0 0 65px 0;
        }
        .item:nth-child(24) .border-radius{
            width: 100px;
            height: 40px;
            border-color: red;
            border-style: solid;
            border-width: 45px 20px 45px 70px;
            border-radius: 60px;
        }
        .item:nth-child(25) .border-radius{
            width: 160px;
            height: 80px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }
        .item:nth-child(25) .border-radius::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            right: -24px;
            top: -8px;
            /*border-color: blue;*/

            border-width: 0 0 30px 30px;
            border-style: solid;
            border-left-color: transparent;
            border-bottom-color: red;
            border-radius: 0 0 60px 0;
        }

    </style>
</head>
<body>
<div class="wrap">
    <header>
        <h3>CSS3边框圆角</h3>
    </header>
    <div class="main">
        <div class="item" data-brief="整圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="拱形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="左上角">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四分之一圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="横着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半个横着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半个竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四分之一竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="饼环">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="左上角圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="对角圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四边不同色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="右透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆右透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆右红透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图前世">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图前世2">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图今生">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="消息框">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="卡槽图形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="奇怪的图形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="QQ对话框">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="奇怪的图形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="">
            <div class="border-radius" style="border:3px solid blue;"></div>
        </div>
    </div>
</div>
</body>
</html>

边框阴影

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局
spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值
可以设置多重边框阴影，实现更好的效果，增强立体感。

例：边框阴影

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3边框阴影</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #F7F7F7;
        }
        .wrap{
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        header{
            padding: 20px 0;
            text-align: center;
            margin-bottom: 20px;

        }
        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }
        .main .item{
            width: 210px;
            height: 210px;
            background-color: #fff;
            float: left;
            margin: 0 30px 30px 0;
            box-shadow: 2px 2px 5px #ccc;
            position: relative;
            display: flex;
        }
        .main .item:after{
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            font-family: "微软雅黑";
            font-size: 18px;
            background-color: rgba(170,170,170,0);
            transition: all 0.3s ease-in;
            z-index: -1;
        }
        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }
        /*从左上角开始顺时针，1,2,3,4*/
        .box-shadow{
            width: 120px;
            height: 120px;
            margin: auto;
            border: 1px solid #DDD;
        }
        .item:nth-child(1) .box-shadow{
            box-shadow: 2px 2px 5px #666;
        }
        /*水平偏移量 正值向右 负值向左 垂直正值向下 负值向上*/
        .item:nth-child(2) .box-shadow{
            box-shadow: -2px -2px 5px #666;
        }


        .item:nth-child(3) .box-shadow{
            box-shadow: 0 -2px 5px #666;
        }

        .item:nth-child(4) .box-shadow{
            box-shadow: 0 2px 5px #666;
        }
        /*模糊度是不能为负 自行设一下*/


        /*偏移量和模糊度是可以相加计算 负号只代表方向*/
        .item:nth-child(5) .box-shadow{
            box-shadow: -5px -5px 0 #666;
        }

        .item:nth-child(6) .box-shadow{
            box-shadow: 5px 5px 0 #666;
        }
        /*10px：表示往四个方向扩张10px*/
        /*因为已经向右下偏移5px,所以左上只有5px*/
        .item:nth-child(7) .box-shadow{
            box-shadow: 5px 5px 0 10px #666;
        }
        /*-10px抵消*/
        .item:nth-child(8) .box-shadow{
            box-shadow: 20px 20px 0 -10px #666;
        }
        /*内阴影,从盒子内部为起点*/
        .item:nth-child(9) .box-shadow{
            box-shadow: inset 20px 20px 0 -10px #666;
        }
        /*同时设置内外阴影*/
        .item:nth-child(10) .box-shadow{
            box-shadow: inset 20px 20px 10px -10px #666,
            10px 10px 10px red;
        }

        /*多个内外阴影*/
        .item:nth-child(11) .box-shadow{
            box-shadow:
            inset 20px 20px 10px -10px #666,
            inset 20px 20px 0 -10px blue,
            10px 10px 10px red,
            10px 10px 0 green;
        }
        /*是否影响盒子布局*/
        .item:nth-child(12) .box-shadow{
            width: 90px;
            height: 90px;
            margin-right: 10px;
            background-color: red;
        }
        .item:nth-child(12) .left{
            box-shadow: 50px 50px 20px blue;
        }
    </style>
</head>
<body>
<div class="wrap">
    <header>
        <h3>CSS3边框阴影</h3>
    </header>
    <div class="main">
        <div class="item" data-brief="标准写法">
            <div class="box-shadow"></div>
        </div>
        <div class="item">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="上面有阴影">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="下面有阴影">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="偏移量和模糊度是可以相加计算">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="需要对比第七个">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="需要对比第六个">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="移量和扩展也是数学运算的">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="内阴影inset">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="内外阴影">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="多个内外阴影">
            <div class="box-shadow"></div>
        </div>
        <div class="item" data-brief="是否会影响盒子布局">
            <div class="box-shadow left"></div>
            <div class="box-shadow right"></div>
        </div>
    </div>
</div>
</body>
</html>

边框图片

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

round 会自动调整尺寸，完整显示边框图片。
此图贴图
repeat 单纯平铺多余部分，会被“裁切”而不显示。

例：边框图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3边框图片</title>
    <style>
        body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F7F7;
        }

        .wrapper {
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        header {
            padding: 20px 0;
            margin-bottom: 20px;
            text-align: center;
        }

        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }

        .main {
            /*overflow: hidden;*/
        }

        .main:after {
            content: '';
            clear: both;
            display: block;
        }

        .main .item {
            width: 210px;
            height: 210px;
            margin: 0 30px 30px 0;
            display: flex;
            position: relative;
            background-color: #FFF;
            float: left;
            box-shadow: 2px 2px 5px #CCC;
        }

        .main .item:after {
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            color: #FFF;
            font-family: '微软雅黑';
            font-size: 18px;
            background-color: rgba(170, 170, 170, 0);
            z-index: -1;
            transition: all 0.3s ease-in;
        }

        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }

        .main .item:nth-child(4n) {
            margin-right: 0;
        }

        /*.main .item:nth-last-child(-n+5) {
            margin-bottom: 0;
        }*/

        /* 以上是骨架样式 */
        .border-image {
            margin: auto;
            /*chrome中一定要有这句才能显示出来*/
            border: 1em solid transparent;
            /*-webkit-border-image: url(images/border.png);*/
            border-image-source: url(images/border.png);
            /*border-image-width: 10px;*/
        }

        /*标准写法*/
        .item:nth-child(1) .border-image {
            width: 200px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
        }
        /*round平铺
            图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框
            border-image-repeat不作用于四个角，只作用于四个边
        */
        .item:nth-child(2) .border-image {
            width: 200px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
            border-image-repeat: round;
        }
        /*stretch拉伸*/
        .item:nth-child(3) .border-image {
            width: 200px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
            border-image-repeat: stretch;
        }
        /*repeat:
            当图片碰到边界时，如果超过则被截断。
        */
        .item:nth-child(4) .border-image {
            width: 200px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
            border-image-repeat: repeat;
        }
        .item:nth-child(5) .border-image {
            width: 100px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
            border-image-repeat: stretch;
        }
        .item:nth-child(6) .border-image {
            width: 180px;
            height: 100px;
            border-image-slice: 26;
            border-image-width: 15px;
            /*上下为round，左右为stretch*/
            border-image-repeat: round stretch;
        }

        .item:nth-child(7) .border-image {
            width: 120px;
            height: 120px;
            border-image-slice: 26 40 40 26;
            border-image-width: 40px;
            /*上下为round，左右为stretch*/
            border-image-repeat: stretch;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <header>
        <h3>CSS3边框图片</h3>
    </header>
    <div class="main">
        <div class="item" data-brief="标准写法">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="round平铺">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="stretch平铺">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="repeat平铺">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="四边stretch">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="分别设置水平和垂直边的平铺效果">
            <div class="border-image"></div>
        </div>
        <div class="item" data-brief="slice参数">
            <div class="border-image"></div>
        </div>

    </div>
</div>
</body>
</html>

最后编辑于：2017.12.08 04:35:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343