您的当前位置：首页 CSS3——01

CSS3——01

来源：星星旅游

1.选择器

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

1.1 属性选择器

属性选择器：属性是相对于标签而言，所谓属性选择器就是根据指定名称的属性的值来查找元素。

1.2 兄弟选择器

element1+element2：element1 之后紧跟其后的element2元素。两种元素必须拥有相同的父元素。eg. .first + li：添加了.first样式的标签的相邻的li元素
element1~element2：element1 之后出现的所有element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。eg. .first ~ li：添加了.first样式的元素之后的所有兄弟li元素

1.3 伪类选择器

1.E:first-child：查找E元素的父元素的第一个子元素E，不会查找的元素的类型。

2.E:last-child：查找E元素的父元素中最后一个子元素E，不会查找的元素的类型。

3.E:first-of-type：查找E元素的父元素的第一个子元素E，查找的元素的类型，过滤掉其它类型的元素。

4.E:last-of-type：查找E元素的父元素的第一个子元素E，查找的元素的类型。

5.E:nth-child(n)：第n个子元素E，不查找类型。

6.E:nth-last-child(n)：倒数第n个子元素E，不查找类型。

7.E:nth-child(even)：所有偶数，不查找类型。

8.E:nth-child(odd)：所有奇数，不查找类型。

9.E:nth-of-type(n)：第n个子元素E，类型。

10.E:nth-last-of-type(n)：倒数第n个子元素E，类型。

11.E:nth-of-type(even)：所有偶数，类型。

12.E:nth-of-type(odd)：所有奇数，类型。

注意：n:默认取值范围为0~子元素的长度，但是当n<=0时，选取无效。

n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-of-type(-n+5)等

eg.为前、后5个li元素添加样式

分析

n=0,-n+5=5;

n=1,-n+5=4;

n=2,-n+5=3;

n=3,-n+5=2;

n=4,-n+5=1;

n=5,-n+5=0;（无效）

所以前、后五个元素应用了样式

13.E:empty：没有任何的内容，连空格都没有的E元素。

14.E:target：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式

1.4 伪元素选择器

1.E::before：定义在一个元素的内容之前插入content属性定义的内容与样式

2.E::after：定义在一个元素的内容之后插入content属性定义的内容与样式

注意：

默认是行级元素，如果想设置宽高，就必须转换为块级元素（三种转换方式：display:block或float:** 或position:**）
必须添加content属性，哪怕不设置内容，也需要content:""，否则后期不可见
E:after、E:before 在旧版本浏览器（IE6/7/8）里是伪类，在新版本浏览器里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。（建议规范书写::）

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding: 200px;
        }
        div:nth-of-type(1){
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 200px;
            background-color: blue;
            float: left;
            position: relative;
        }

        div:nth-of-type(2)::before{
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            top: -10px;
        }
        div:nth-of-type(2)::after{
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            bottom: -10px;
        }
    </style>

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

3.E::first-letter：文本的第一个字母或字（应用：首字下沉）

4.E::first-line：文本第一行

5.E::selection：可改变选中文本的样式

2.颜色设置

预设值：background-color: red;
十六进制：background-color: #c9ffa6;
rgb(R,G,B)：background-color: rgb(255,150,0);
hsl(H,S,L)：background-color: hsl(300,100%,50%);

HTML5中添加了一些新的颜色的表示方式

1.RGBA(R,G,B,A);

RGBA在RGB的基础上多了控制alpha透明度的参数

RGBA比元素设置CSS的透明度（opacity:0-1，只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；transparent 不可调节透明度，始终完全透明）更好，它可以不影响整个元素的透明度，也不会影响到元素其他的属性。

语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间（0：透明；1：不透明）

正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

红绿==>黄，绿蓝==>青，红蓝==>紫，红绿蓝==>白

eg.background-color: rgba(255,0,255,0.2);

2. HSLA(H,S,L,A)：

此色彩模式与相同，只是在模式上新增了Alpha透明度

语法：

H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360，过渡为：(红橙黄绿青蓝紫红)

S：Saturation(饱和度)。指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值，一般建议保留50%

A：Alpha(透明度)。取值0~1之间（0：透明；1：不透明）

eg.background-color: hsla(300,50%,50%,1);

3.文本阴影：text-shadow

这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时，能给文字增加质感。

语法：（可以多个阴影叠加）

text-shadow:[Color X Offset Y Offset Blur],[Color X Offset Y Offset Blur]...

或者

text-shadow:[X Offset Y Offset Blur Color],[X Offset Y Offset Blur Color]...

说明：

Color：阴影颜色
X Offset：阴影的水平偏移距离。正值：阴影向右偏移；负值：阴影向左偏移
Y Offset：阴影的垂直偏移距离。正值：阴影向下偏移；负值：阴影向上偏移
Blur：阴影的模糊值。不可以是负值，值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0

4.盒模型：box-sizing

1.在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度和高度（在页面呈现出来的）：

padding + border + width = 盒子的宽度
padding + border + height = 盒子的高度

很明显，这不直观，很容易出错，造成网页中其它元素的错位。

2. CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

content-box：设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度（对象的实际宽度=设置的width值+border+padding）
border-box：设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容（对象的实际宽度=设置的width值），如果添加了padding和border，那么真正放置内容的区域会减小，但是它可以稳固页面的结构

3.浏览器的兼容性：IE8及以上版本支持该属性，Firefox 需要加上：-moz-，低版本的IOS和Android浏览器需要加上：-webkit-

5.边框圆角：border-radius

border-radius可以通过值来定义样式相同的角，也可以对每个角分别定义

border-radius：*px——四个角的圆角值都一样
border-radius：*px *px *px *px——左上；右上；右下；左下
border-radius：*px *px—— 左上、右下；右上、左下
border-radius：*px *px *px——左上；右上、左下；右下

单个圆角的设置：除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等；如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

另一种方法设置圆角：border-radius:水平x方向/垂直y方向

以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置）

1.制作椭圆（四个方向上都是一致的对称圆角）

border-top-right-radius: 100px 50px;

border-bottom-left-radius: 100px 50px;

border-bottom-right-radius: 100px 50px;

border-top-left-radius: 100px 50px;

等价：

2.非对称圆角

6.案例：Android机器人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Android机器人</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #ccc;
        }
        .content{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin:50px auto;
        }
        .an_header{
            width: 250px;
            height: 125px;
            background-color: darkgreen;
            margin: 10px auto;
            /*添加圆角*/
            border-radius: 125px 125px 0 0;
            position: relative;
        }
        /*使用伪元素添加眼睛*/
        .an_header:before,
        .an_header:after{
            /*1.一定设置content属性*/
            content: "";
            /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
            position: absolute;
            bottom: 40px;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #fff;
        }
        .an_header:before{
            left: 70px;
        }
        .an_header:after{
            right: 70px;
        }
        .an_body{
            width: 250px;
            height: 250px;
            background-color: darkgreen;
            border-radius: 0 0 20px 20px;
            margin:0 auto;
            position: relative;
        }
        /*手臂*/
        .an_body:before,
        .an_body:after{
            content: "";
            position: absolute;
            top: 20px;
            background-color: darkgreen;
            width: 30px;
            height: 180px;
            border-radius: 10px;
        }
        .an_body:before{
            left:-40px;
        }
        .an_body:after{
            right:-40px;
        }

        .an_footer{
            width: 250px;
            height: 100px;
            position: relative;
            margin:0 auto;
           /* background: #fff;*/
        }
        /*脚*/
        .an_footer:before,
        .an_footer:after{
            content: "";
            position: absolute;
            top: 0;
            background-color: darkgreen;
            width: 30px;
            height: 90px;
            border-radius: 0 0 10px 10px;
        }
        .an_footer:before{
            left: 50px;
        }
        .an_footer:after{
            right: 50px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="an_header"></div>
    <div class="an_body"></div>
    <div class="an_footer"></div>
</div>
</body>
</html>

7.边框阴影：box-shadow

box-shadow 属性向边框添加一个或多个阴影（添加多个时用逗号隔开）

语法：box-shadow:h v blur spread color inset;

说明：

h：必需，允许负值；水平方向的偏移值
v：必需，允许负值；垂直方向的偏移值
blur：可选，默认0；模糊距离
spread：可选默认0；阴影的尺寸，扩展和收缩阴影的大小，值越大，阴影的扩散面积越大
color：可选，默认黑色；颜色
inset：可选,默认是外阴影；将外部阴影 (outset) 改为内部阴影

width: 200px; height: 200px display: block background-color: hsla(360,100%,50%,0 color:

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文