1
伪元素选择器 ::before && ::after
tips:
1.content:"", 必写,即使没有内容也要设置为"".
2.行内元素, 要设置宽高, 必须转为行内块
3.js无法操作
2.rgba(red, green, blue, transparent)(0-255 || 0.0%-100%)
HSLA(hue saturation lightness alpha)
hue: 0-360 0(360)红色 120(绿色) 240(蓝色) 红橙黄绿青蓝紫红
saturation: 饱和度; lightness: 亮度 0-100%
alpha: 透明度 0-1
3.文字阴影 text-shadow(offsetX offset blur color)
4.盒子阴影: box-shadow(h(horizontal水平的)) v(vertical垂直的) blur() spread color inset内阴影)
tips: 1.offsetX offsetY blur 必写
2. 顺序固定, 即使blur没有, 也要设置为0px, 才能在第四个设置color
5. box-sizing: content-box border-box
6: 先上下再左右
border-top-left-radius:
border-bottom-right-radius:
border-radius: 1px 2px 3px 4px ; 上左 上右 下右 下左
border-radius: 1px 2px 3px ; 左上 (右上, 左下) 右下
border-radius: 1px 2px ; (左上 右下) (右上 左下)
7. 线性渐变色 linear-gradient()
设置终点 linear-gradient(to right, color1 start, color1 end, color2 start, color2 end, color3 start)
to right 相当于 90deg
to bottom 相当于 180deg (默认)
设置起点(兼容性问题-webkit-) -webkit-linear-gradient(right,..)
8. radial-gradient(形状 大小 坐标, 颜色1, 颜色2, 颜色3)
形状: 默认 ellipse 椭圆 ; circle 圆形
大小: 默认 最远的角 farthest-corner closest-side
坐标: at position 默认中心点, 设置一个参数,另一个参数默认为center
重复: repeating-radial-gradient