CSS3新特性样式
背景
background-origin
我们知道盒子的大小有三部分组成:border
, padding
, content
,当我们设置背景图片时,图片是会以左上角对齐,但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin
正是用来设置这个的,它有三个可选值:
border-box
padding-box
content-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; }