css实现阴影效果

最新推荐文章于 2025-05-26 12:19:03 发布

cindy_rain

最新推荐文章于 2025-05-26 12:19:03 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css-阴影

本文链接：https://blog.youkuaiyun.com/cindy_rain/article/details/49496815

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS3的box-shadow属性来为网页元素添加阴影效果。详细解释了box-shadow属性的各个参数，包括水平和垂直阴影位置、模糊距离、阴影尺寸、颜色及内外阴影的区别。

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

用CSS实现阴影效果

//今天写的html的部分的一部分
<div class="main">
    <h2>请选择您的身份类型：</h2>
</div>

//css部分
.main{
    width:1003px;
    min-height:600px;
    margin:40px auto;
    padding-bottom:21px;
    box-shadow:0px 0px 10px #c3c3c3;
}

效果图

CSS3 box-shadow 属性
定义和用法
box-shadow 属性向框添加一个或多个阴影。
语法
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow ：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 (outset) 改为内部阴影。*