三维视角解析box-shadow

最新推荐文章于 2025-06-30 22:07:10 发布

置顶

Ugine_H

最新推荐文章于 2025-06-30 22:07:10 发布

阅读量3.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_40574071/article/details/94326686

本文深入解析CSS中的box-shadow属性，重点讲解offset-x、offset-y、blur-radius和spread-radius的使用及区别，通过实例演示如何创建复杂的阴影效果。

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

box-shadow这个属性，大多时候自己都是用到才会去百度下其使用方式。因为这个属性有语法，通常项目中如果不是要多炫酷的效果，都是以下的语法是最常用的了。具体其他语法可以看这里box-shadow

.box-shadow{
    box-shadow: 1px 0px 0px red;
}

box-shadow有5个属性值offset-x、offset-y、blur-radius、spread-radius、color

前两个值很好理解，但后面两个值你能准确说出他们之间的区别吗？

本文主要就是对这两个属性值作详细的理解。

blur-radius：模糊距离，很多文章中说到这个属性值的时候都是说可以理解为模糊度来使用，值越大，就越模糊（一开始我也这么理解的，实际上这个理解过程中对模糊距离的定义模糊化了）

spread-radius：阴影大小（这个的定义很明确）

促使我去深入理解这个属性是因为我在使用的过程中有那么一刻，遇到了这个问题。然后就一直想这是为什么呢？

问题就是：在设置阴影右偏移时明显看到了，阴影往右边冒出来了。那为什么我在增加了个模糊度的时候，div的上下却也有了阴影呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	 box-shadow: 10px 0p

最低0.47元/天解锁文章

200万优质内容无限畅学