CSS进阶
n.css设置背景渐变色
1.线性渐变
1 | * { |
repeating-linear-gradient()
:重复的线性渐变,语法和linear-gradient()
相同。
2.径向渐变/放射渐变
1 | * { |
repeating-radial-gradient()
:重复的线性渐变,语法和radial-gradient()
相同。
属性过渡
transition
属性可用来给元素添加某个属性的过渡效果
1 | transition: all .2s ease-in-out; |
transition
有四个子属性:
transition-property
选择对哪个属性应用过渡,可选值有
all
、none
或者自定义属性名,多个属性之间用逗号隔开:1
transition-property: border,background;
transition-duration
过渡动画持续时间,单位为’s’(秒)且不可省略,默认值为0,如:
1
transition-duration: .8s;
transition-timing-function
动画过渡的线性规律(又称时间曲线),自带6个值:
ease
:默认值,逐渐变慢;linear
:匀速,线性;ease-in
:加速;ease-out
:减速;ease-in-out
:先加速后减速。
transition-delay
设置动画延迟,值也是秒,写法与
transition-duration
相同。
一般我们使用复合写法,如:
1 | transition: all .2s ease-in-out; |
提示:在实际开发中,建议给元素原属性也加上transition
属性,这样就能避免元素恢复原样貌时没有过渡动画的bug。
变形
transform
属性可使元素变形,包括位移、旋转、缩放、倾斜:
阴影
使用box-shadow
和text-shadow
可以给元素和文本添加阴影:
1 | box-shadow: h-shadow v-shadow blur spread color inset(outset); |
h-shadow
:必需,阴影水平方向上位置,正数向右,负数向左,单位px
;v-shadow
:必需,阴影垂直方向上位置,正数向下,负数向上,单位px
;blur
:可选,阴影模糊距离,单位px
;spread
:可选,阴影的尺寸;color
:可选,阴影颜色,值可以是rgba(3,204,204,0.2)
或rgb(1,1,1)
类型或直接用#bbdbc6
hex型数值;inset
/outset
:可选,设置投影为外投影或内投影,默认外投影。
添加多个阴影,用逗号分隔开即可:
1 | box-shadow: 1px 1px 5px 0 blue inset, 2px 2px 10px rgba(240,240,240,0.2) outset; |
滤镜
filter
属性可以给元素添加图像滤镜: