做一个萌萌哒的button之box-shadow-优快云博客

本文详细介绍了CSS中的box-shadow属性，包括其参数含义、使用方法及示例。通过多个实例展示了如何利用box-shadow创建不同的阴影效果，帮助读者更好地理解和运用该属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上篇：http://blog.youkuaiyun.com/u010037043/article/details/47035077

一、box-shadow

box-shadow是给元素块加入周边阴影效果。

box-shadow: inset X-offset Y-offset blur spread color ;

box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色

阴影类型：此參数可选。如不设值，默认投影方式是外阴影。如取值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值能够是正负值。

Y-offset:阴影垂直偏移量，其值也能够是正负值。

阴影模糊半径：此參数可选。，但其值仅仅能是为正值，假设其值为0时。表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此參数可选，其值能够是正负值，假设值为正。则整个阴影都延展扩大。反之值为负值时。则缩小。

阴影颜色：此參数可选。

如不设定颜色，浏览器会取默认色。但各浏览器默认取色不一致，建议不要省略此參数。

做了几个demo帮大家看看各个參数的作用：

下图投影方式为inset

下图投影方式为outset

浏览器支持例如以下：

二、demo中的box-shadow

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 
            0 -0.1em .3em,hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 
            0 .3em 1px,rgba(0,0,0,0.2) 0 .5em 5px;

为了大家看的更明显，我将demo中的box-shadow的outset类型的位置调整了，将inset类型的颜色改变了。

能够看出对于demo中的button，模拟的是光从上方打过来。

因此。button表面的投影，即inset类型的投影为高亮型。且半透明。

button的下部分为光打不到的地方，因此outset类型的投影越来越深，最后一个为灰色，是为了让整个button在二维平面中有立体效果。

demo戳链接http://runjs.cn/detail/jduic0cj