CSS3
一. 常用选择器
1. 通配符选择器（＊{}）
*通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素
*{margin：0； padding：0；}
2. 元素选择器(标签名{})
元素选择器其实就是文档的元素，如html,body,p,div等等
3. 类选择器（.类名{}）
1、使用类选择器之前需要在html元素上定义类名
2、类选择器还可以结合元素选择器来使用（.类名 标签{}）
4. id选择器（#ID{}）
和上面说的类选择器很相似，不同的是ID选择器是一个页面中唯一的值
5. 后代选择器（Ｅ Ｆ）
前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开
6. 子元素选择器(E>F)
子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素
7. 相邻兄弟元素选择器(E + F)
EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻
8. 通用兄弟选择器（Ｅ 〜 Ｆ）
E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择
所有Ｅ元素后面的Ｆ元素。
9. 群组选择器（selector1,selector2,...,selectorN）
将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开
二、属性选择器
1. E[attr]
只使用属性名，但没有确定任何属性值；
也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性
的元素都将被选中
2. Ｅ[attr="value"]
E[attr="value"]是指定了属性值“value”
也可以多个属性并写，进一步缩小选择范围
注：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时
3. E[attr~="value"]
只要属性值中有一个value相匹配就可以选中该元素
4. E[attr^="value"]
选择attr属性值以“value”开头的所有元素
5. E[attr$="value"]
选择元素attr属性，并且他的属性值是以value结尾的
6. E[attr*="value"]
所选择的属性，其属性值中有这个"value"值都将被选中
7. E[attr^="value"]
选择器会选择attr属性值等于value或以value-开头的所有元素
三. 伪类选择器
1. 动态伪类
遵循爱（LoVe）恨（HAte）
a:link
a:visited
a:hover
a:active
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果；
:focus用于元素成为焦点，这个经常用在表单元素上。
2. UI元素状态伪类
:enabled :disabled :checked
主要是针对于HTML中的Form元素操作
3. CSS3的:nth选择器
1、:first-child
2、:last-child
3、:nth-child(n) 数字、even偶数、odd奇数
4、:nth-last-child(n)
5、:only-child
注： :nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值
4. CSS3的:nth选择器
:nth-of-type() :nth-child()
:nth-last-of-type() :nth-last-child()
:first-of-type :first-child
:last-of-type :last-child
:only-of-type :only-child
5. 否定选择器 :not()
6. 伪元素
CSS 伪元素用于将特殊的效果添加到某些选择器。
::first-letter
::first-line
::before
::after
::selection 改变网页被选中文本的样式
四 、文字相关样式
4.1 颜色 (Color)
透明度：
opacity: 0.1;
opacity: 0.5;
RGBA：
color: rgba(255, 0, 0, 0.6);
4.2 文本阴影(Box-shadow)
a. text-shadow
//text-shadow: h-shadow v-shadow blur color;
text-shadow:2px 2px 5px #000;
- h-shadow：必需，水平阴影的位置允许负值
- v-shadow：必需，垂直阴影的位置允许负值
- blur：可选，模糊的距离。
- color：可选，阴影的颜色
五、边框阴影(Box-shadow)
使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。
5.1 基本用法
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
syntax-1.png
box-shadow:2px 2px 5px #000;
image.png
box-shadow:0px 0px 10px #000;
image.png
5.2 内阴影
image.png
box-shadow:inset 2px 2px 5px #000;
image.png
5.3 阴影扩展长度值
image.png
box-shadow:0px 0px 5px 10px #000;
image.png
box-shadow:0px 15px 10px -15px #000;
image.png
box-shadow:inset 0px 15px 10px -15px #000;
image.png
5.4 多重阴影
box-shadow:0px 0px 0px 3px #bb0a0a,
0px 0px 0px 6px #2e56bf,
0px 0px 0px 9px #ea982e;
image.png
5.5 伪元素::before和::after的乐趣
使用伪元素::before和::after，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：
image.png
<div class="box11 shadow"></div>
.box11 {
width: 300px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin: 10px;
}
.shadow {
position: relative;
max-width: 270px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.shadow::after{
right:10px;
left:auto;
transform:rotate(3deg);
}
六、CSS3 @font-face 规则
<style>
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>
七、圆角边框 (Border)
圆角边框：border-radius: 20px 20px 20px 20px;
语法
border-radius: length/% ;
border-radius: 一个值； //四个角都一样
border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角
border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角
border-radius: 值1 值2 值3 值4；//左上角、右上角、右下角、左下角
八、渐变 (Gradients)
8.1 线性渐变
background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)
通过角度来确定渐变的方向。
后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。
可以用rgba产生渐隐效果
repeating-linear-gradient 重复渐变
8.2 径向渐变
background: radial-gradient(颜色 0%,颜色 50% 颜色 100%)
<position>：主要用来定义径向渐变的圆心位置。
length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值
九、变换
transform: rotate | scale | skew | translate;
属性之间用空格隔开 注意：不是逗号“，”
缩写：transform : translate() rotate() scale() skew(); 用空格隔开
9.1 移动translate
1、translate(<translation-value>[, <translation-value>])
2、translateX(<translation-value>)
3、translateY(<translation-value>)
9.2 旋转rotate
rotate(<angle>)
Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
Perspective : 500;
设置元素被查看位置的视图
9.3 缩放scale
1、scale(<number>[, <number>])
2、scaleX(<number>)
3、scaleY(<number>)
9.4 扭曲skew
1、skew(<angle> [, <angle>])
2、skewX(<angle>)
3、skewY(<angle>)
9.5 改变元素基点transform-origin
transform-origin:X,Y
(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;
9.6 过渡
Transition: all 5s ease 0s;
transition-property:
transition-property ： none | all | [ <IDENT> ]
transition-duration:
transition-duration ： <time> [, <time>]*
<time>为数值，单位为s（秒）或者ms(毫秒),
transition-timing-function:
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2) 四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
十、动画
@Keyframes（关键帧）
@keyframes 动画名{
from{...}
to{...}
}
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
animation-name: 动画名称
animation-name: none | name 可以同时附几个animation给一个元素，用逗号“，”隔开
animation-duration 动画持续时间
取值:<time>为数值，单位为s （秒.）其默认值为“0”
animation-timing-function: 动画速度
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out
animation-delay: 动画延迟时间
取值为<time>为数值，单位为s(秒)，其默认值也是0。
animation-iteration-count 动画次数
animation-iteration-count:
infinite;（无限循环）
<number>;（循环次数）
animation-direction 动画运动方向
animation-direction:
normal (单向)
alternate (来回)
reverse （单向，结束——开始）
alternate-rever (来回，来回，开始-结束-开始-结束)
animation-fill-mode 动画填充模式
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。
animation-play-state: running/paused 动画的播放状态
简写
CSS 动画属性
下表列出了 @keyframes 规则和所有 CSS 动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画模式。 |
| animation | 设置所有动画属性的简写属性。 |
| animation-delay | 规定动画开始的延迟。(秒：3s) |
| animation-direction | 定动画是向前播放、向后播放还是交替播放。 |
| animation-duration | 规定动画完成一个周期应花费的时间。(秒：3s) |
| animation-fill-mode | 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 |
| animation-iteration-count | 规定动画应播放的次数。 （次：3次） |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-play-state | 规定动画是运行还是暂停。 |
| animation-timing-function | 规定动画的速度曲线。 |
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
等价于下面
div {
animation: example 5s linear 2s infinite alternate;
}
