盒模型美化

0815

盒模型美化

盒模型阴影
box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.6);
盒模型阴影
X轴偏移量
Y轴偏移量
模糊半径
扩散半径
颜色

渐变
linear-gradient
线性渐变
第一个值： 可选
-90deg 角度
left 方向
后面的值：颜色 停止位置(可选——平均分配)
red 10%

-webkit-repeating-linear-gradient 重复
linear-gradient
径向渐变
ellipse、circle
颜色…
background-image:
-webkit-gradient
第一个值 linear（type）
第二个值 起始点坐标 （0%-100%）
第三个值 结束点坐标 （0%-100%）
第四个值 from（起始颜色-可选）
color-stop(.25, rgba(255, 0, 0, .2)) （可选）
to(transparent) 结束颜色（可选）
background-image:
-moz-linear-gradient
第一个值 45deg（角度）
第二个值 rgba(255, 255, 255, .2) 25%

-webkit-background-clip: text;

盒模型倒影
-webkit-box-reflect
盒模型倒影
第一个值 倒影的方向
below 下方向
above 上
left 左
right 右
第二个值 倒影和对象之间的间隔 可以是负数
第三个值 怎么渲染倒影

遮罩
mask 遮罩
-webkit-mask-size
-webkit-mask-image
-webkit-mask-repeat
-webkit-mask-position
-webkit-mask

图像调整
-webkit-filter:
grayscale(100%) 灰度
sepia(100%) 褐色
hue-rotate(deg) 色相旋转
saturate(%) 饱和度旋转
invert(%) 反相
opacity(20%) 透明度
brightness(60%) 亮度
contrast(%) 对比度
blur(10px) 高斯模糊
drop-shadow 投影