文章/答案/技术大牛

发布

css的box shadow

CSS Box Shadow 基础概念

CSS box-shadow 属性用于在元素周围添加阴影效果。它可以让元素看起来像是浮在页面上，增加视觉深度。

语法

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

h-offset：水平偏移量，正值向右，负值向左。
v-offset：垂直偏移量，正值向下，负值向上。
blur-radius（可选）：模糊半径，数值越大，阴影越模糊。
spread-radius（可选）：阴影的扩展或收缩量，正值扩大阴影，负值收缩阴影。
color：阴影的颜色。
inset（可选）：内阴影，不加此参数默认为外阴影。

优势

增强视觉效果：通过添加阴影，可以让元素看起来更有立体感。
提升用户体验：适当的阴影可以引导用户的视线，突出重要内容。
灵活性高：可以通过调整参数实现多种不同的阴影效果。

类型

外阴影：默认情况，阴影在元素外部。
内阴影：通过添加 inset 关键字，阴影在元素内部。

应用场景

按钮和卡片：增加立体感，提升用户交互体验。
图片和容器：突出显示内容，增加视觉层次感。
网页布局：通过阴影分隔不同的区块，增强页面结构感。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
        .inset-box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            box-shadow: inset 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="inset-box"></div>
</body>
</html>

常见问题及解决方法

问题：阴影不明显或颜色不正确

原因：可能是由于 blur-radius 设置过小或颜色值不正确。

解决方法：调整 blur-radius 和 color 参数。

.box {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* 增加模糊半径和颜色透明度 */
}

问题：阴影超出元素边界

原因：可能是由于 spread-radius 设置过大。

解决方法：调整 spread-radius 参数。

.box {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3) 0; /* 设置 spread-radius 为 0 */
}

参考链接

MDN Web Docs - Box Shadow

通过以上信息，你应该对 CSS box-shadow 属性有了全面的了解，并能解决常见的使用问题。

页面内容是否对你有帮助？

有帮助

没帮助

CSS - box-shadow技巧？

、

我在div上面有一个元素，它的样式是椭圆形的。我想在这个div上创建一个阴影以及椭圆形状的元素，但是我希望椭圆形状的元素上的阴影在div的下面。我在div和椭圆中都使用了box-shadow。我不知道是否有一个代码来裁剪阴影上的某个部分，以便我可以满足要求，层序列将是div- xD，椭圆-阴影，div，椭圆。作为参考，您可以查看下面的链接。

浏览 2提问于2014-04-16得票数 0

5回答

CSS box- jQuery .css()中的阴影

、、、

Firefox18似乎无法识别-moz-box-shadow或box-shadow CSS属性。 function () { $(this).css('box-shadow<

浏览 2提问于2013-01-12得票数 10

回答已采纳

2回答

jquery .class悬停函数..将样式应用于单个元素，而不是组。

、、

{}, function(

浏览 0提问于2011-07-27得票数 0

回答已采纳

6回答

为什么在页脚中我的链接旁边会有一条白线？

、、

刚刚设计了一个网站：但是在页脚的链接旁边似乎有白线，你知道为什么吗？

浏览 0提问于2015-03-17得票数 0

5回答

覆盖框-阴影

、、

现在有一个特定的图像，它不应该有长方体阴影，但它在该区域。现在，如果我给图像一个ID或类，它将被赋予更高的优先级，这是很好的。但是我怎么才能解开长方体的阴影呢？将其设置为0px不起作用。谢谢!约翰

浏览 0提问于2011-07-05得票数 1

回答已采纳

2回答

CSS3工具提示背景

、、、

我的网站上有引导程序，但我不喜欢工具提示中的css，所以我用菜单-酷的CSS3提示来覆盖他。 -moz-box-shadow: 2px 2px 2px #999; box-shadow</

浏览 5提问于2014-01-03得票数 1

回答已采纳

1回答

无法在IE 8中显示数据库中的图片

、、

使用IE 8浏览我的展示车列表和图片的页面时，无法显示图片( .jpeg)和阴影效果。但是其他浏览器工作正常..下面是我的CSS。:0 0 5px #CCC; -moz-box-shadow:0 0 5px #CCC; -o-box-shadow:0 0 10px

浏览 2提问于2011-08-16得票数 0

4回答

当另一个元素悬停时，如何从元素中移除框影效果？

、、

结构： <div class="inner_box"> </div>还请向我展示如何在JQuery中实现此操作的示例。

浏览 2提问于2013-09-12得票数 32

回答已采纳

2回答

我试图从我在css中定义的元素中删除框阴影，如下所示： .pagewrap .page { moz-box-shadow:0 1px 2px #fff,0 -1px 1px #666,inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.8);-webkit-box-shadow:0 1px 2px #fff,0 -1px1px #666,inset 0 -1px 1px rgba(0,0,0,0.5),i

浏览 0提问于2013-12-05得票数 3

回答已采纳

2回答

方框阴影css属性，产生投影效果的有效方法？

我一直在研究网页设计中的阴影效果技术。因此，我想应用该技术来实现我的网站的顶部标题栏。如果您有任何建议，我们将非常感谢。

浏览 1提问于2011-12-12得票数 0

回答已采纳

4回答

jQuery悬停按钮保持悬停效果

、、、

$("#navigation li.active").next().hover(function() { $(this).css("box-shadow", "inset -4px 0 7px -你能说一下如何制作正常的悬停效果吗，只有当光标在按钮上时才能显示。

浏览 0提问于2013-08-26得票数 2

2回答

以编程方式生成纸质阴影

、、

这是通过一个图像完成的。有没有可能用CSS或其他任何东西完全以编程方式生成这样的阴影。

浏览 2提问于2011-06-18得票数 1

3回答

在jQuery中向框影属性添加inset以动态更新

、、

我有这样的事情： $('.box-shadow').css('boxShadow','inset'); $('.box-shadow').css(

浏览 3提问于2014-05-02得票数 0

回答已采纳

2回答

在不覆盖现有属性的情况下添加内嵌框阴影选项

我在样式表中对.foo应用了一个长方体阴影属性： box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset;现在，我希望在不覆盖现有box-shadow属性的情况下，将另一个选项添加到具有不同动态生成值的几个div中： <div class="foo" style="box-shadow: 0 -5px 0 0red inset

浏览 1提问于2013-05-01得票数 2

回答已采纳

1回答

无法使用JQuery为某些元素设置框影CSS属性。

、、、

我编写了一个javascript函数，该函数设置元素的框影： $(elmt).css("-webkit-box-shadow", val); $(elmt).css("-moz-box-shadow</

浏览 2提问于2014-10-25得票数 1

回答已采纳

2回答

删除PrimeNG复选框上的外行

、、

我想删除PrimeNG复选框组件的辉光，即大纲。(我知道，我知道。这是为了便于访问，但是我自己正在实现这个指标)*:focus {{

浏览 1提问于2017-11-14得票数 1

回答已采纳

3回答

向尚未单击的元素添加投影

、

基于以下平铺布局：**抱歉，这里的解决方案在于添加一个类规则，只包含方块阴影到当前的瓦片层&还有：.layer .tile img { position: relative;} Position Relative停止了覆盖在相邻元素上的方块阴影

浏览 1提问于2012-10-12得票数 0

回答已采纳

4回答

我编写了Jquery代码，可以在悬停时更改按钮，但我为每个按钮分别编写了代码。我如何使它成为一个函数

、、、

我为我网站上的每一个按钮分别编写了代码。如何使它成为我想要使用的每个按钮都可以使用的Jquery函数。({ "-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)","-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,

浏览 1提问于2016-11-23得票数 0

回答已采纳

3回答