css中值可以多个叠加的属性

2019-07-08  本文已影响0人  coder_coder

平平无奇的一个css属性,当你给它附加多个值时,叠加出的效果往往会超出你想象。

1.background(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds#CSS)
background-image可以指定多个,再用background-position指定每个的位置用逗号分隔

一个background叠加了3个背景效果: 气泡,firefox,渐变

2. box-shadow
设置多个inset和outset效果

3个值

3. filter
给元素添加滤镜;美图只用一个滤镜当然是不够的啦
注意:叠加值是通过空格分隔的

filter: blur(1px) contrast(200%) hue-rotate(90deg);

4. font-family
虽然可设置多个值,但它优先从左到右顺序取第一个有效值,但他不属于可以叠加的范围,所以此处划去

5. animation 
可指定多个动画

6. border
重点!!!border可以做的事情超出你的想象,熟练使用它可以画出各种形状出来,进而再画出各种动物或图案等;

每个形状都是通过设置一个div的不同border得到的

后续会继续补充……

上一篇下一篇

猜你喜欢

热点阅读