[分享]css3怎么根据ps写阴影

在CSS3中，我们可以很容易地按照PS设计稿上的要求添加阴影效果。下面就是一些根据PS设计稿写阴影的方法。/ 正常阴影 / boxshadow: hshadow vshadow blur spread...

在CSS3中，我们可以很容易地按照PS设计稿上的要求添加阴影效果。下面就是一些根据PS设计稿写阴影的方法。

/* 正常阴影 */
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的位置，可以是正值、负值或者0。

v-shadow：垂直阴影的位置，可以是正值、负值或者0。

blur：阴影的模糊程度，可以是正值或者0。

spread：阴影的扩展程度，可以是正值、负值或者0。

color：阴影的颜色，可以是颜色的名字、RGB值或者RGBA值。

inset：设置为inset阴影会变成内容内部的阴影。

例如： box-shadow: 2px 2px 5px #666666;

/* 多重阴影 */
box-shadow: h-shadow v-shadow blur spread color, h-shadow v-shadow blur spread color...;

可以使用逗号分隔多个box-shadow属性，就可以创建多重阴影。

例如：box-shadow: 2px 2px 5px #666666, 4px 4px 10px #999999;

/* 线性渐变阴影 */
box-shadow: inset x-offset y-offset blur spread color-stop color, ...;

可以使用线性渐变作为阴影，其中color-stop指定颜色和位置。

例如：box-shadow: inset 0 0 20px 5px rgba(0,0,0,0.5), 0 0 20px 5px rgba(255,255,255,0.5);

/* 径向渐变阴影 */
box-shadow: inset x-offset y-offset blur spread color-stop color, ... radial-gradient();

可以使用径向渐变作为阴影，可以在box-shadow中添加radial-gradient。

例如：box-shadow: inset 0 0 20px 5px rgba(0,0,0,0.5), 0 0 20px 5px rgba(255,255,255,0.5) radial-gradient(circle at center, #fff 0%, #000 100%);