CSS3学习手记 - 爱码网

--------------------CSS3新增选择器--------------------
#E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
#E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
#E:first-child：匹配元素类型为E且是父元素的第一个子元素
#E:last-child：匹配元素类型为E且是父元素的最后一个子元素
#E:only-child：匹配元素类型为E且是父元素中唯一的子元素
#E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
#E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
#E:first-of-type：匹配父元素的第一个类型为E的子元素
#E:last-of-type：匹配父元素的最后一个类型为E的子元素
#E:only-of-type：匹配父元素中唯一子元素是E的子元素
#E:empty 选择一个空的元素
#E:enabled 可用的表单控件
#E:disabled 失效的表单控件
#E:checked 选中的checkbox
#E:not(s) 不包含某元素
#E:target 对应锚点的样式
#E > F E元素下面第一层子集
#E ~ F E元素后面的兄弟元素
#E + F 紧挨着的兄弟元素
#属性选择器：
　　1、E[data-attr] 含有data-attr属性的元素
　　2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
　　3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
　　4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
　　5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”

--------------------CSS3圆角、阴影、rgba--------------------
#CSS3圆角：
　　1、设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px;

　　2、同时分别设置四个角： border-radius:30px 60px 120px 150px;

　　3、设置四个圆角相同： border-radius:50%;

#CSS3阴影：
box-shadow：h-shadow v-shadow blur spread color inset;分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

#rgba（新的颜色值表示法）：
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

代码示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圆角的练习</title>
 6     
 7     <style type="text/css">
 8         .box{
 9             width: 200px;
10             height: 300px;
11             background-color: rgba(0,0,0,0.5);/*red green blue 透明度*/
12             margin:50px auto 0px;
13             text-align: center;
14             line-height: 300px;
15 
16             /*左上角，圆角
17             border-top-left-radius: 30px;
18 
19             上左、上右、下右、下左
20             border-radius:30px 30px 20px 50px;*/
21 
22             border-radius: 50%;/*圆角设置*/
23             box-shadow: 10px 10px 5px 2px #ddd;/*阴影设置*/
24         }
25 
26         /*内部阴影设置*/
27         .box2{
28             width:300px;
29             height:50px;
30             background-color: #f80;
31             box-shadow: 0px 0px 20px 5px red inset;
32             margin: 50px auto 0px;
33         }
34     </style>
35 
36 </head>
37 <body>
38     <div class="box">
39         圆角、阴影、rbga测试
40     </div>
41     <div class="box2">
42         
43     </div>
44 </body>
45 </html>

CSS3圆角、阴影、rgba练习