css31

css3新增较为常用知识

• 边框属性
• 背景属性
• 阴影
• 渐变
• 过渡

边框属性

边框圆角

通过border-radius可以设置不同的圆角，顺序为：top-left top-right bottom-left bottom-right. 当border-radius的值超过50%时或者超过宽度一半的时
候，元素就会变成圆。
没有边框的情况下，圆角会做用到background上。

边框图片

通过border-image可以给元素边框设置图片，包括以下几个属性：

• border-image-source这个属性主要用来给标签引入边框图片
• border-image-slice可以指定边框图像顶部、右侧、底部、左侧内偏移量。没有具体的单位值，只
  可以使用数字或者百分比。
• border-image-width设置边框图片宽度，代替盒子本身的边框宽度。
• border-image-outset通过这个属性，可以让边框属性延伸到盒子外部。
• border-image-repeat通过这个属性，可以设置边框背景是否重复。

border-image-slice

通过border-image-source引入边框图片之后border-image-slice
属性会将图片分隔为9个区域: 四个角、四个边以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
九个区域的顺序：top-left top-right bottom-left bottom-right 上边 右边 下边 左边 中心

背景属性

• background-origin 背景图像的填充位置
• background-clip 背景图像的裁切位置
• background-size 设置背景图像的尺寸
• 多背景设置

background-origin

• padding-box 背景图像填充框的相对位置(默认值)
• border-box 背景图像边界框的相对位置
• content-box 背景图像的相对位置的内容框

background-clip

• border-box 背景被裁切到边框位置(默认值)
• padding-box 背景被裁切到padding
• content-box 背景被裁切到content

背景填充与背景裁切的区别：背景填充是可以指定背景图片填充的位置，而背景裁切是在某一个地方将背景图片裁切掉，那一个部分的内容会被裁切掉，但是默认是有的。

多背景

多背景这一属性可以帮助我们在开发中，遇到多张图片在一起时，可以使用。比如：通栏图片等等

阴影

• 盒子阴影
• 文本阴影

盒子阴影

box-shadow简写属性，属性值为：

• h-shadow 水平阴影的位置，允许负值
• v-shadow 垂直阴影的位置，允许负值
• blur 模糊距离
• spread 设置阴影的大小
• color 设置阴影的颜色、
• inset 将处于元素外部的阴影转换为元素内部的阴影。

文本阴影

text-shadow简写属性，属性值为：

• h-shadow 水平阴影的位置，允许负值
• v-shadow 垂直阴影的位置，允许负值
• blur 模糊距离
• color 阴影的颜色

渐变

• 线性渐变
• 径向渐变
• 重复渐变

线性渐变

1 linear-gradient: point | angle color percentage;

• point表示方向，angle表示角度。
• color表示颜色，一般分为起始颜色、过渡颜色和结束颜
  色。
• percentage表示百分比，一般表示颜色渐变过程中的百分
  比。

to+方向表示从方向相反位置到方向处。例如：to left表示从右向左进行渐变

过渡

通过transition属性实现

语法如下：

transition: property duration timing-function
delay;

delay 延迟

当有多种状态效果需要改变时，可以通过延时属性来让状态效果改变有顺序