01_CSS3

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:39 被阅读0次

基础知识

选择器

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>

01_CSS3

基础知识

选择器

属性选择器

伪类选择器

first

last

only

其他

超链接

伪元素选择器

颜色

文本

边框

边框阴影

边框图片

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读