表格
| 单元格; |
单元格; |
单元格; |
| 单元格; |
|
单元格; |
| 单元格; |
单元格; |
单元格; |
一、CSS3 圆角矩形
圆角矩形
圆角矩形每个角的设置
用图片修饰边缘，具体看css样式
简化：等同div2-4
二、CSS3 box-shadow:向方框添加一个或多个阴影
none：无阴影
阴影顺序：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 阴影的颜色 inset内阴影（默认值为outset）透明值
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影的颜色 （1/2个图阴影效果） 加有 :hover动态
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影的颜色 （1/2个图阴影效果） 加有:hover动态
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 阴影的颜色（整个图阴影效果）加有 :hover动态
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 阴影的颜色 （整个图阴影效果）
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 阴影的颜色 透明值 （整个图阴影效果 ）
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 加多个阴影外延值 （1/2个图阴影效果）加有 :hover动态
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 加多个阴影外延值 （1/2个图阴影效果）
box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 加多个阴影外延值（整个图阴影效果）加有 :hover动态
box-shadow ：内阴影，数据同上，在后面叫inset。默认值一般是outset 向外加阴影，一般是省略的，但如为0时加和不加是有区别的
三、CSS3背景增加样式
background-size-规定背图片的尺寸：像素、百分比设置宽高
background-size-规定背图片的尺寸：cover;b表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
background-size-规定背图片的尺寸：contain;表示把图像扩展至最大尺寸，以使其宽、高度完全适应内容区域
四、CSS3渐变
（1）线性渐变
属性：linear-gradinet(开始位置 角度,起初颜色,终止颜色 )
开始位置:渐变开始的位置,属性值可以为百分比/长度/left、right、top、bottom(可组合使用);
角度：渐变终止方向角度,当开始位置可用数值或百分比时;
重复渐变将属性改为：repeating-linear-gradient()
linear-gradient(red,blue)
最简单的渐变，两种渐变色，渐变方向默认为：由上向下
linear-gradient(to left,red,blue)
增加方向属性，两种渐变色，渐变方向默认为：由右向左
linear-gradient(to right bottom,red,blue)
增加方向属性，两种渐变色，渐变方向默认为：由左上向右下
linear-gradient(60deg,red,blue)
增加方向属性，两种渐变色，渐变方向默认为：用角度表示方向
linear-gradient(60deg,red,blue,green,orange);
使用多种颜色，默认各颜色所占区域是等分的
linear-gradient(60deg,red 10%,blue 30%,green 80%,orange 100%)
通过百分比来改变各颜色所占的区域
linear-gradient(60deg,red 30px,blue 80px,green 120px,orange 300px)
通过像素来改变各颜色所占的区域
repeating-linear-gradient(60deg,red 20px,blue 40px)
重复渐变，前面加repeating-
（2）径向渐变-放射性渐变
属性：linear-gradinet(开始位置 角度,起初颜色,终止颜色 )
形状：ellipse（椭圆）为默认值/circle（圆形）
发散方向：属性值可为left,right,top,bottom(可以组合使用)
大小（半径）：属性可以用像素或关键字表示
closest-side:表示圆心到距离最近的边
farthest-side：圆心到距离最远的边
closest-corner：表示圆心到距离最近的角
farthest-corner：表示圆心到距离最远的角
重复径向渐变将属性改为：repeating-radial-gradient()