HTML - box阴影不适用于圆角正方形，即使是透明的

HTML是一种标记语言，用于创建网页的结构和内容。在HTML中，可以使用CSS（层叠样式表）来为网页添加样式和布局。其中，box-shadow属性用于为元素添加阴影效果。

然而，对于圆角正方形，即使设置了透明的背景，box-shadow属性也无法直接应用于其边框。这是因为box-shadow属性会在元素的边界周围创建一个矩形的阴影，而不会考虑元素的圆角。

解决这个问题的一种方法是使用伪元素来模拟圆角正方形，并在伪元素上应用阴影效果。具体步骤如下：

首先，为圆角正方形的父元素添加position: relative;属性，以便在其内部创建伪元素。
使用::before或::after伪元素选择器来创建一个新的元素，作为圆角正方形的阴影层。
为伪元素设置position: absolute;，并将其宽度和高度与圆角正方形相同。
使用border-radius属性为伪元素添加圆角效果。
最后，使用box-shadow属性为伪元素添加阴影效果。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: transparent;
}

.square::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>

在上述示例中，我们创建了一个名为.square的父元素，并为其设置了宽度和高度为200px，背景色为透明。然后，使用::before伪元素选择器创建了一个新的元素，并为其设置了position: absolute;，宽度和高度与父元素相同，并使用border-radius属性为其添加了圆角效果。最后，使用box-shadow属性为伪元素添加了一个半透明的阴影效果。

这样，我们就成功地为圆角正方形添加了阴影效果。

腾讯云相关产品和产品介绍链接地址：

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

有帮助

没帮助

HTML - box阴影不适用于圆角正方形，即使是透明的

、

我试图添加一个图像，作为一个按钮，该图像是一个圆形的正方形，其中4个角落是透明的。我把它添加到我的网页上，如下所示：并像这样设置样式： position:relative; left:0px

浏览 13提问于2017-02-01得票数 1

回答已采纳

1回答

这个如果不透明的话

、、、、

如果我的生活不透明的话，我就有了这个。我使iframe允许透明，也给了iframe的身体一个背景颜色:透明； <iframe src="about:blank" width="100%" height="200px" id="iframe1frameborder="0" onLoad="autoResize('iframe1');" allowtransparency=&

浏览 3提问于2014-01-06得票数 0

回答已采纳

1回答

在css3中模拟IE8样式

、、、、

我需要一些方法来模拟在IE8中查看时不支持的各种CSS样式：我尝试过使用，但是当我包含.htc文件时，它产生了一些令人不快的副作用我知道有一些jQuery插件可以为IE8中的元素添加框阴影和圆角，所以我正在考虑在条件代码块中使用这些插件。($.browser == 'msie' && $.browser.version.split('.

浏览 3提问于2012-02-15得票数 2

4回答

同时使用边框半径和长方体阴影(CSS)

、、

好吧，我知道这两个属性都还不完全受支持，但我还是在使用它们:P这个问题有可能解决吗？我还注意到-webkit-box-shadow与隐藏的div有一些问题。

浏览 2提问于2010-04-26得票数 48

回答已采纳

1回答

阴影到透明的UITableView和圆角

、、、

我需要给我的桌子圆角，并在它的边界外投下阴影。表格不会占据整个屏幕，所以我不能简单地将maskToBounds和clipsToBounds设置为NO，因为单元格会从表格的底部边缘泄漏出来。我尝试这样设置图层阴影的值：[layer setShadowRadius:6.0]; [layer setShadowColor不仅如此，它还对细胞的每一条分割线都这样做。

浏览 0提问于2013-04-26得票数 1

2回答

在两个元素之间共享半透明(没有重叠)？

、、、

我很确定这是不可能的。但是外面有很多聪明的人，所以我要说...

浏览 6提问于2015-04-28得票数 1

3回答

IE8的css3中的阴影和不透明度(不匹配)

、、

我有一些图像(在我的bachground图像前面)具有低不透明度(png格式)，所有的东西在ie8和火狐中都很好，直到我在ie8中为圆角和阴影框添加了pie.htc(或来自谷歌代码的边框辐射.htc).behaviour : url(pie.htc);border-radius:15px;-webkit-border-radius:15px;-moz-<e

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

回答已采纳

3回答

圆角周围的长方体阴影？

、、

我正在使用Twitter的Bootstrap库快速拼凑出一个原型。下面是我的布局在HTML中的样子： <div class="alert alert-info fade in"></div>下面是我的LESS的样子： div.navbar div.navbar-messages

浏览 0提问于2012-05-14得票数 19

回答已采纳

4回答

CSS过滤器，用于在对象周围创建实心边框。

、、

问题描述()：我试图用透明的方式在PNG周围形成一个坚实的边框，所以box-shadow不是一个选项(因为它只是将图像的正方形角阴影起来)。如何才能让filter: drop-shadow()在整个元素周围创建一个边框，而不需要模糊或传播阴影呢？是否可以将多个过滤器应用于同一元素以实现此效果？或者还有其他方法来实现这一点呢？

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

回答已采纳

1回答

为什么QVideoWidget没有出现在我的应用程序中？

、、、

我正在构建一个基于FFmpeg的视频转换器应用程序，其中一个额外的特性是视觉上修剪视频的能力。Python3.9与PyQt5 5.15.6视频小部件video_widget没有出现在我的应用程序中。单击play按钮，您可以听到音频，但是应该出现video_widget的帧仍然是空的。其他的一切都如预期的那样运作。我首先在一个单独的测试文件中编写了代码(使用了一个不同的、更简单的.ui文件)

浏览 36提问于2022-01-19得票数 1

5回答

为什么当我在PNG上放置一个方框阴影时，它会显示出一个看不见的背景？

、

我有正确的代码。没有添加任何颜色。有我所有的前置修复。它在任何浏览器中都是这样显示的。我用PS中正确的透明度设置保存它，如屏幕截图所示。它是透明的，除非我在它周围放了一个长方体阴影。这是什么？

浏览 6提问于2012-01-25得票数 1

回答已采纳

6回答

css表格单元格布局中的圆角？

、

盒子里的东西高度各不相同。棘手的是，这些盒子还需要有圆角。为此，我使用了“滑动门”技术。基本上，框的标记如下所示： <div class="box-header"> </div>

浏览 0提问于2009-08-07得票数 9

回答已采纳

5回答

CSS绘制箭头的CSS下拉阴影

、

我希望当div悬停在上时出现的箭头也能落下阴影。border-left-color: pink;_border-top-color: pink;}-moz-box-shadow: 1px 0px 5px #888;box-shadow: 1px 0p

浏览 4提问于2011-04-05得票数 16

回答已采纳

6回答

如何使html块只在一侧投射阴影和/或跟随非方形形状

、

我一直在使用css中的box-shadow样式使用语法尤其是使用当这样做的时候，我得到了一个阴影在所有4个方面。我不想这样。我想让它只在盒子的一侧或两侧投射阴影，可以吗？假设盒子围绕着一个非正方形的形状，盒子有一个透明的背景，里面有一个png或svg，说明

浏览 2提问于2018-07-11得票数 0

3回答

我尝试在CSS3中使用圆角，但是我得到了一个奇怪的bug。在IE9中，一切都显示得很好。然而，在Chrome中，当我试图为边框添加颜色时，边角本身似乎太苍白了。还有没有人感染了这个bug？下面是我使用的一个示例：-moz-border-radius: 10px;border-radius: 10px;谢谢你的帮助，但我找到问题所在了。我是在舍入图像(可能应该指定这个)，所以边框舍入发生在图像后面，即

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

回答已采纳

6回答

三角形周围的CSS方框阴影

、、

我需要创建一个三角形与投影使用简单的html和css。通过另一个堆栈溢出问题的回答，我能够创建带有斜接边框的三角形。基本上我创建一个盒子的一侧有一个非常宽的边框，而附近的一侧有一个宽而透明的边框： border-bottom : 60px solid transparent;border-left : 60px solid black;效果很好，但当我尝试应用一个长方体阴影

浏览 12提问于2011-03-17得票数 12

回答已采纳

2回答

背景-滤镜:灰度(100%)不影响背景的阴影属性

我正在尝试创建一个将灰度应用于背景的“屏幕”。背景是一个带有文本内容的div，其文本阴影被应用于使其看起来像霓虹灯标志。灰度将文本更改为灰色，但不更改文本阴影。有灰暗的阴影吗？<!DOCTYPE html> <head> &l

浏览 5提问于2022-05-21得票数 0

2回答

图像没有为四舍五入的图像占用完整的div空间

、

我有一个设置为父目录的div和一个img标签。将阴影应用于div时，图像不会采用全宽。我试着给图像提供z-index，以便稍微突出一点，但在这种情况下没有帮助。我不明白为什么它适用于正方形图像，而不是已经圆角的图像。 : translateY(-50%); overflow: hidden; z-index: 4; box-shadow

浏览 6提问于2020-01-12得票数 1

回答已采纳

2回答