CSS3新增属性

####以前我们学的都是CSS2，因为CSS3兼容性有问题，所以，我们在使用的时候可以在caniuse.com这个网站上可以查看CSS3每个属性的兼容性

CSS3属性如果考虑兼容所有浏览器的话，必须写全5行才行

            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;

一、选择器

现在，我们看看CSS3增加了哪些选择器

http://css.doyoe.com/ 这个手册css3手册写的非常好，像选择器这种东西，不用都记住，遇到了现来这里查就好

所谓伪对象选择符，不是真实存在的对象，可以用一个冒号，但为了区别于伪类选择器，所以我们建议用俩冒号

重点记一下伪对象选择符中的before和after

正常来说，你要在一个元素后面加个小竖线的话，如果竖线和边框高度一样还好可以用边框做，但是要是要求小竖线和文字一样高，那么就可以用：after来做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        #ul1 li{
            width: 100px;
            height: 50px;
            background: #ffff00;
            float: left;
            line-height:50px;
            text-align:center;
            position: relative;
        }
        #ul1 li::after{
            content : "";
            background:#000;
            width: 1px;
            height: 20px;
            position: absolute;      /*因为伪类对象是行级元素，所以要设宽高的话就得先定位*/
            right: 0px;
            top: 15px;
        }
    </style>
</head>
<body>
<ul id="ul1">
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
</ul>
</body>
</html>

此外after还有一种作用，清除浮动

给元素清除浮动的方法

给父元素加overflow ：hidden
给父元素设个固定的高
给子元素下面加个div，div 设置样式为 clear：left 或both
给父元素加个class 叫clearfix，然后运用after

二、文本，字体

1.text-shadow 文本阴影

  text-shadow: 10px -10px 0px rgba(255,0,0,0.6);

第一个参数是水平偏移量，正值就往右，负值就往左
第二个参数是垂直偏移量，正值就往下，负值往上
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰
第四个参数，阴影颜色

2.text-overflow 超出文本显示省略号

      /*单行文本溢出，用省略号显示的语法*/
    p{
        width: 300px;
        height: 50px;
        border: 1px solid #ff0;
        overflow: hidden;/* 让超出边框的文本隐藏起来*/
        text-overflow: ellipsis;/* 让超出边框边缘的的文本显示成...*/
        white-space:nowrap;/*让多出边框的文本不换行，在同一行显示*/
    }

如果不加text-overflow的话，就是这样子

加上text-overflow的话，就会在最后显示省略号

三、颜色 rgba

用rgba的好处是当父元素设置透明的时候，子元素不会跟着一块变透明

 div{
            background: #f00;
            opacity: 0.6;/* 如果这样设置透明度的话，div里面的子元素文字也会跟着透明*/
            filter: alpha(opacity = 60);
        }

如果用rgba设置透明度的话，子元素就不会跟着透明了

  div{
            background: rgba(255,0,0,0.6);
        }

四、边框

1.圆角效果 border-radius: 5px; border-radius: 50%; 就变成圆了

下面做个小例子，五环

五环都是一层压一层滴，像上图一样，蓝环与黄环相交的地方，有一处是要蓝环在上面，而另一处则是黄环在上面，代码是不能让环一半在上一半在下的，他是个统一的个体，所以，我们可以在每个环里用伪对象after再插入个和此环颜色一样的环，，让插入的环层级提高，盖住与之相交的其他颜色的环，然后after下面的边框颜色设为透明，这样黄色环就显示出来了，而且改在底下的蓝环上面

最开始的时候呢，是这样的，原始蓝环在最下面，其次是after蓝环，黄色在他俩上面，但是，after设置层级后，就是初始蓝，黄，after蓝了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五环</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .circle, .circle::after{
            width: 200px;
            height: 200px;
            border: 10px solid #000;
            border-radius: 50%;
            position: absolute;
        }
        .circle::after{
            content: "";
            top:-10px; /*因为是在每个圈里加子元素，所以子元素从边框下面加上，所以要往上窜个边框的距离*/
            left:-10px;
        }
        .blue{
            border-color: #0000ff;
            top: 0px;
            left: 0px;
        }
        .blue::after{
            border-color: #0000ff;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .black{
            border-color: #000000;
            top: 0px;
            left: 230px;
        }
        .black::after{
            border-color: #000000;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .red{
            border-color: #ff0000;
            top: 0px;
            left: 460px;
        }
        .red::after{
            border-color:  #ff0000;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .yellow{
            border-color: #ffff00;
            top: 110px;
            left: 110px;
        }
        .yellow::after{
            border-color:#ffff00;
        }
        .green{
            border-color: #00ff00;
            top: 110px;
            left: 340px;
        }
        .green::after{
            border-color: #00ff00;
        }
    </style>
</head>
<body>
<div class="circle blue"></div>
<div class="circle black "></div>
<div class="circle  red" ></div>
<div class="circle  yellow"></div>
<div class="circle green"></div>
</body>
</html>

2.box-shadow 边框阴影，和文本阴影类似

第一个参数是水平偏移量，正值就往右，负值就往左
第二个参数是垂直偏移量，正值就往下，负值往上
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰
第四个参数外延值，值越大，就越往外延伸
第五个参数，阴影颜色

五、背景

1.background-origin背景原点

background-origin属性值有
border-box
padding-box
content-box
表示背景是从border、padding、content处开始的

2.background-size背景大小

默认俩参数，可以设置宽和高
属性值为cover的话呢，就是背景扩大到覆盖整个元素为止，可能会超出范围
属性值为contain的话呢，就是扩大到有一边挨着元素了为止，可能会有一块没覆盖上

3.background-clip背景裁切

属性值为border -box表示从border处裁切，保留border以内的
属性值为content-box 表示从content处裁切，保留content以内的