一、CSS3的边框效果
border-radius:边框圆角,当设置为四个值按顺序顺时排列(左上,右上,右下,左下)
border-image:将图片设置成边框
box-shadow:设置盒子阴影,6个参数
例:box-shadow:#999999 10px(水平上) 10px(垂直上) 2px代表阴影颜色是#999999,阴影向右偏移10px,向下偏移10px,模糊程度2px,模糊程度值越大,阴影约模糊;当水平上取负值阴影向左偏移;垂直上取负值,向上偏移
二、CSS3的文本效果
text-shadow:设置文本阴影,同盒子阴影,4个参数
word-wrap:自动换行,防止文字过多溢出
三、CSS3背景与渐变效果
background-size:设置背景图片的大小
background-origin:设置背景图片的定位区域
background-clip:设置背景图片的绘制区域
线性渐变:向上、向下、向左、向右、对角方向
例:background:linear-gradient(to top,blue,white)代表从下到上,渐变色为蓝到白
径向渐变:由它们的中心定义
四、CSS3的3D变形(transform)
3D变形属性:
transform :2D或3D转换
transform-origin :改变需要转换的起始位置,默认为中心点
transform-style:如果想要元素进行3D转换,必须在父元素上添加preserve-3d属性;preserve可以理解为视角,用于定义3D元素距视图的距离
3D变形方法:
3D位移:translateX/Y/Z 沿X/Y/Z轴移动
3D旋转:rotate rotate3d(X,Y,Z,adeg)表示在X/Y/Z轴旋转了a度;X/Y/Z取值为1和0,取值为1时,表示在此轴上旋转a度
3D缩放:scale scale3d(X,Y,Z)表示在X/Y/Z轴缩放