【CSS】题14. CSS3新增属性

[Easay]

• 2d 3d变换：transform
• transition、animation
• 媒体查询@media
• 新单位rem、vw、vh等
• 圆角(border-radius)、阴影(box-shadow)、对文字加特效(text-shadow)、线性渐变(gradient)
• hsl：色调、饱和度、亮度指定颜色
• hsla：色调、饱和度、亮度、透明度指定颜色
• rgba：红、绿、蓝、透明度指定颜色

[Easay]

选择器

CSS3新增了些选择器：

[Easay]

新样式

边框

• border-radius
• box-shadow
• border-image

背景

• background-clip : 确定背景画区

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

• background-origin：设置图片以哪里对齐

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
默认情况是padding-box，即以padding的左上角为原点

• background-size

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

• background-break

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

文字

• word-wrap

word-wrap: normal; 使用浏览器默认的换行
word-wrap: break-all; 允许在单词内换行

• text-overflow
• text-shadow
• text-decoration
• 颜色

rgba: rgb为颜色值，a为透明值；
hala: h 为色相，s为饱和度，l为亮度，a为透明度；

[Easay]

transition过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

• 过渡效果
• 持续时间

transition: css属性、花费时间、效果曲线（默认ease），延迟时间（默认0）

也可以分开写：

transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

[Easay]

transform转换

transform属性允许我们旋转、缩放、倾斜或平移元素；
transform-origin：转换元素的位置，默认值(x,y,z):(50%,50%,0)

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

[Easay]

animation动画

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

渐变

• linear-gradient:线性渐变
• radial-gradient:径向渐变