CSS3新特性样式
背景
background-origin
我们知道盒子的大小有三部分组成：border, padding, content，当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的，它有三个可选值：
border-boxpadding-boxcontent-box其中意思不必解释就可以明白。如果不进行设置的话，默认是padding-box，即以padding的左上角为原点。
background-clip
该属性是用来设置背景(背景图片、背景颜色)延伸的范围，有4个值可选
- border-box：背景延伸至边框外沿(但是在边框下层)
- padding-box：背景延伸至内边距(padding)外沿,不会绘制到边框处
- content-box：背景被裁剪至内容区(content box)外沿
- text：背景被裁剪成文字的前景色
background-size
background-size用以设置背景图片大小。单张图片的背景大小可以使用以下三种方法中的一种来规定：
- 使用关键词
contain - 使用关键词
cover - 设定宽度和高度值
设定指定的宽度和高度值想必不用多加介绍。contain和cover会等比例的缩放图片，以使得图片能够最大的被完整包含或者最小的覆盖背景区。
边框
边框圆角
使用border-radius可以设置边框为圆角的，border-radius的值就是圆角边框的半径。
| 取值个数 | 设置 |
|---|---|
| 1个，如border-radius: 20px | 设置四个角的圆角半径都为20px |
| 2个，如border-radius: 10px 20px | 设置左上角和右下角这条对角线为10px,另一条对角线为20px |
| 3个，如border-radius: 10px 20px 30px | 设置左上角为10px,右上角和左下角这条对角线为20px,右下角为30px |
| 4个，如border-radius: 5px 10px 15px 20px | 从左上角开始设置，按顺时针来，即左上角为5px,右上角为10px, ... |
我们发现半径也分为水平半径和垂直半径，这两个也可以分别设置，用/分开当做两组，第一个用来设置水平半径，第二个设置垂直半径，如
width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px;
background-color: pink;
如果不分开设置，则默认水平半径和垂直半径是相同的。
CSS3选择器
CSS3新增了许多的选择器，为我们选择元素提供了更加灵活的选择。
属性选择器
- [attr]：选择包含attr属性的标签
- [attr=value]：选择attr属性值为value的标签
- [attr^=value]：选择attr属性值以value开头的标签
- [attr*=value]：选择attr属性值包含value的标签
- [attr$=value]：选择attr属性值以value的标签
div[class] {
/* 会选择包含class属性的div标签 */
}
div[class="active"] {
/* 会选择class属性值为active的div标签 */
}
div[class^="header"] {
/* 会选择class属性以header开头的div标签 */
}
... ...
结构伪类选择器
- E:first-child
- E:last-child
- E:nth-child(n)
- E:nth-last-child(n)
- E:first-of-type
- E:last-of-type
- E:nth-of-type(n)
- E:nth-last-of-type(n)
CSS3 2D变换
CSS3 2D变换包括对元素进行移动、缩放、转动、拉长或拉伸。
-
translate()：对元素进行进行移动
- translate(100px)：对元素向x正方向移动100px(负值向负方向移动)
- translate(100px, 100px)：对元素向x, y正方向方向移动100px
-
scale()：对元素进行缩放
- scale(n)：对元素进行缩放，传入的参数大于1，进行放大，小于1，进行缩小
- scale(x, y)：第一个参数对宽度进行缩放，第二个值对高度进行缩放
-
rotate()：围绕中心旋转，正值顺时针，负值逆时针
- transform-origin：可以改变旋转的中心，如：
/* 围绕左上角进行旋转 */
transform-origin: left top;
/* 围绕中心旋转 为默认值 */
transform-origin: 50% 50%;
CSS3 3D
3D变换的操作同2D相同，只是多了一个对Z轴的操作，如translateZ()，而rotate也分为rotateX(), rotateY(), rotateZ()，分别表示绕着X轴，Y轴，Z轴旋转。2D变换的rotate()其实就相当于rotateZ()。
CSS3动画
transition
.box {
height: 100px;
width: 100px;
background-color: black;
}
.box:hover {
transform: translateX(600px);
}
当我们把鼠标放在盒子上时，盒子向右移动了600px，但是这个过程是在瞬间完成的，十分的突兀，我们希望是缓慢由一个转态转变到另一个状态的，这种效果又叫做过渡，这时就需要用到transition属性了。
animation
与transition一样，animation也有很多的属性
-
animation-name：动画名称
-
animation-duration：动画持续时间
-
animation-timing-function：动画时间函数
-
animation-delay：动画延迟时间
-
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为
-
infinite，意思是无限循环
-
animation-direction：动画执行方向
-
animation-paly-state：动画播放状态
-
animation-fill-mode：动画填充模式
过渡是指在两个状态之间，而动画则是指在多个状态之间变化，这些状态我们称之为关键帧，因此动画又称之为关键帧动画。使用动画首先要创建关键帧，然后使用animation-name去调用该动画，如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: aqua;
}
.box:hover {
animation-name: move;
animation-duration: 1s;
}
/* 创建一个关键帧动画 动画名为move */
/* 调用时使用animation-name: move调用 */
@keyframes move {
/* 第一个状态 0% 时的状态 可以使用from代替 */
/* 这里的百分比是指 总时间 * 百分比 得到的某个时刻的状态*/
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
/* 100% 可以使用 to 代替 */
100% {
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS3 flex布局
当一个父元素被设置为display:flex时，它就是弹性布局，子元素的float、clear和vertical-align属性将失效。此时我们把父元素称之为container(容器)，把子元素称之为item(项目)。当父元素被设置为弹性布局后，对子元素有什么影响? 先来感受一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
width: 500px;
height: 400px;
background-color: crimson;
}
.item {
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
}
/* 这个是为了演示方便 样式不重要 不必细看 */
.item div{
width: 50%;
height: 50%;
position: absolute;
/* 下面三行语句是为了设置居中对齐 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: brown;
/* 圆角边框 */
border-radius: 50%;
/* 下面两行设置文字居中对齐 */
text-align: center;
line-height: 50px;
/* 设置字体样式 */
font-size: 30px;
font-weight: 700;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item"><div>1</div></div>
<div class="item"><div>2</div></div>
<div class="item"><div>3</div></div>
</div>
</body>
</html>
container上的属性
直观的感受了一下flex的效果，现在我们来看看flex要设置哪些属性，首先设置在container的flex属性有
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面来一一介绍。
flex-direction是用来设置主轴的，它有以下四个值可选
- row：默认值，主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
现在我们分别修改container里面的样式
flex-direction: row-reverse;
item上的属性
下面6个属性是设置在item上的
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- self-align
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，现在设置第2个item的order为1
.item:nth-child(2){
order: 1;
}
