css阴影做边框

最新推荐文章于 2025-10-17 10:46:42 发布

原创最新推荐文章于 2025-10-17 10:46:42 发布 · 744 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用CSS3的box-shadow属性创建各种阴影边框效果，包括水平阴影、垂直阴影、模糊距离、阴影尺寸和颜色。通过实例展示了从简单到复杂的3至5个参数的box-shadow用法，并提供了实现第一张图阴影边框的代码。无论你是初学者还是想备忘，这篇文章都是一个很好的参考。

好久没有发布博客了，今天写一个简单的。css阴影边框

相信大家见到过很多这种样式：

那对于css3不熟悉的可能要调很久。我把样式记在这里，自己忘记了可以查看，也方便大家参考。

首先，w3school上对box-shadow的属性描述是这样的：

那么box-shadow后面带的值应该是6个：

box-shadow: h-shadow v-shadow blur spread color inset;

但是我们一般没有带那么多参数。一般3至5个。

1.当带3个参数即水平阴影，垂直阴影和阴影颜色时：

width: 90%;
height: 150px;
box-shadow: 10px 10px #dedede;
border-radius: 8px;

效果是这样的：

2. 当带4个参数即水平阴影，垂直阴影，模糊距离和阴影颜色时：

width: 90%;
height: 150px;
box-shadow: 10px 10px 10px #dedede;
border-radius: 8px;

3. 当带5个参数即水平阴影，垂直阴影，模糊距离，阴影尺寸和阴影颜色时：

width: 90%;
height: 150px;
box-shadow: 10px 10px 10px 10px #dedede;
border-radius: 8px;

而 inset 内部阴影一般很少用，默认为外部阴影。

4.当这么写时，即可显示第一张图的阴影边框：

width: 90%;
margin: 10px auto;
height: 150px;
border-radius: 10px;
box-shadow: 5px 5px 30px 3px #dedede; /*水平垂直阴影相等，模糊距离大一点，阴影尺寸小一点即可实现*/