一、 box-shadow
box-shadow
属性可以营造层次感,充当没有宽度的边框以及实现一些特殊效果。
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 6px 6px 10px 3px rgba(0, 0, 0, 0.2);
也可以用逗号隔开,同时实现多个阴影效果
box-shadow: 6px 6px 10px 3px rgba(0, 0, 0, 0.2),
-6px -6px 10px 3px rgba(255, 0, 0, 0.2);
如果没有指定inset
,默认阴影在边框外,即阴影向外扩散。
使用 inset
关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
box-shadow: inset -6px -6px 10px 3px rgba(0, 0, 0, 0.2),
-6px -6px 10px 3px rgba(255, 0, 0, 0.2);
二、border-radius
border-radius
用来实现圆角矩形,这是一个简写属性,可以使用更详细的写法,如border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
和 border-bottom-left-radius
用 /
区分圆角的水平方向和垂直方向半径,值可以为长度、百分比和calc()
。
矩形长宽相等的时候,border-radius
值为50%时可以实现一个圆形,不等时实现椭圆。区分每个角可以实现半圆和扇形。
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% / 50%;
border-radius: 1em/5em;
/* 等价于: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
三、background
background
的效果可以叠加,实现很多效果。
纹理、图案
渐变
雪碧图动画
背景图尺寸适应