css3 变换、过渡效果、动画

1 CSS3 选择器

1.1 基本选择器

1.2 层级

空格
>
+ .item+li
~ .item~p

1.3 属性选择器

[attr]
[attr=value]
[attr^=value]
[attr$=value]
[attr*=value]
[][][]

1.4 伪类选择器

:link
:visited
:hover
:active
:focus
:first-child .list li:first-child
:last-child
:nth-child() 从1开始 odd even
:nth-last-child() 从1开始
:only-child li:only-child
:first-of-type
:last-of-type
nth-of-type()
nth-last-of-type()
only-of-type

<ul>
    <li></li>
    <li></li>
    <p></p>
    <li>li:nth-of-type(3) </li>
    <li></li>
    <li></li>
</ul>

li:nth-of-type(3)   #选择到
li:nth-child(3)   #没有满足条件的元素

1.5 伪元素选择器

::before .item::before
::after .clearfix::after {content:''; display:block; clear:both}

<div class="nav clearfix"> 
    子元素浮动
    [::after 此处是伪元素创建的]
</div>


<div class="banner">
</div>

::first-letter
::first-line
::selection
::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

2 CSS3 基础

2.1 新增颜色单位

rgba() 不透明0~1

2.2 新增长度单位

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

3.2 布局

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width

3.4 不透明度

opacity: 0~1

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>盒子阴影</title>
 6     <style>
 7         .item {
 8             display: inline-block;
 9             margin:20px;
10             width: 100px;
11             height: 100px;
12             border: 1px solid #999;
13         }
14 
15         .item01 {
16             box-shadow: 10px 10px;
17         }
18         .item02 {
19             box-shadow: 3px 3px #ccc;
20         }
21         .item03 {
22             /*大部分 需要设置这几个值*/
23             box-shadow: 10px 10px 10px #ccc;
24         }
25         .item04 {
26             /*外延值*/
27             box-shadow: 0px 0px 0px 120px #ccc;
28         }
29 
30         .item05 {
31             /*多重阴影*/
32             box-shadow: 0px 0px 3px 5px red,
33                         0px 0px 3px 10px orange,
34                         0px 0px 3px 15px yellow,
35                         0px 0px 3px 20px green,
36                         0px 0px 3px 25px cyan,
37                         0px 0px 3px 30px blue,
38                         0px 0px 3px 35px purple;
39         }
40     </style>
41 </head>
42 <body>
43     <h1>阴影</h1>
44     <hr>
45 
46 
47     <div class="item item01">01</div>
48     <div class="item item02">02</div>
49     <div class="item item03">03</div>
50     <div class="item item04">04</div>
51     <div class="item item05">05</div>
52     <div class="item item06">06</div>
53 
54     <hr>
55 
56     
57 </body>
58 </html>

阴影