css3其他效果

1)媒体查询

不同分辨率下不同的样式,适应不同的屏幕

css3其他效果_第1张图片最大宽度,最小宽度

2)颜色渐变

渐变之后是一张图片 background-image

css3其他效果_第2张图片

默认效果是从上到下(to bottom)的渐变  linear-gradient是线性渐变

要是想改变方向,要设置三个参数。注意:第一个参数是方向

设置角度就可以任意方向的渐变:

90°就是从左向右进行渐变,180°是从上到下,360°由下到上

颜色也可以多个

重复的线性渐变:

径向渐变:主要用在圆和椭圆上 由圆心开始向外

css3其他效果_第3张图片css3其他效果_第4张图片

css3其他效果_第5张图片

3)多列显示

列数量、列间间隙、列宽

  1. 倒影效果

  1. css单位

css3其他效果_第6张图片

em:父级默认字体是16px,20em就是320px(20*16)

css3其他效果_第7张图片 

rem:根据body的字体大小。此时是30px,10rem就是300px

css3其他效果_第8张图片 

你可能感兴趣的:(css3,前端,css)