如何仅在边缘添加阴影以反转 c 径向渐变？

Question

我是这个主题的新手，在任何地方都找不到如何将阴影仅应用于反 C 型角。

下面是示例图像的 link，我试图为其仅在角落添加阴影

下面是我用来实现这个反向圆角的代码：

CSS代码：

div {
  background-color: #a9a8a8;
  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background: -o-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 500px;
}

<div></div>

所以现在我想只对深灰色部分的圆角添加阴影效果。我想说明浅灰色位于灰色之上的效果。

Answer 1

由于您已经在使用 radial-gradient 创建边框角勺形状，因此只需在中间添加一个额外的色标位置即可产生阴影效果。

在下面的代码片段中，我们使用以下渐变（每个角）：

radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px)

这个梯度可以解释如下：

径向渐变的颜色是从圆心到 rgba(204, 0, 0, 0) 最大 100px 半径。颜色为透明色，产生反C切（或勺）的效果。
从100px半径到104px半径，颜色逐渐从rgba(204, 0, 0, 0)变为#AAA（灰色），这会产生类似阴影的效果。您可以通过更改此颜色值来更改阴影的颜色。
在 104px 和 105px 半径之间，渐变的颜色从 #AAA 变为 #f7f6f6 这使得颜色看起来平滑变化而不是硬-停止。

div {
  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 500px;
}

<div></div>

如果您想生成评论中提供的图像中的输出，请查看以下代码段。此代码段的工作原理与上面解释的相同：

div {
  background: -moz-radial-gradient(0 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(100% 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(100% 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(0 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background: -webkit-radial-gradient(0 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(100% 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(100% 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(0 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background: radial-gradient(circle at 0 100%, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 100% 100%, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 100% 0, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 0 0, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 600px;
}

<div></div>

Answer 2

我的建议是使用 4 个角元素。
全部定位到那里的相对容器。
并带有 box-shadow: 0px 0px |amount-of-blur|length-of-shaodw| color
我选择 box-shadow: 0px 0px 60px 50px black

body {
  background-color: #222;
}
.corner-shadow {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: white;
  overflow: hidden;
}
.corner-shadow .corner {
  position: absolute;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  box-shadow: 0px 0px 60px 50px black;
}
.corner.top {
  top: -2px;
}
.corner.left {
  left: -2px;
}
.corner.right {
  right: -2px;
}
.corner.bottom {
  bottom: -2px;
}

<div class="corner-shadow">
  <div class="corner top left"></div>
  <div class="corner top right"></div>
  <div class="corner bottom left"></div>
  <div class="corner bottom right"></div>
</div>

如何仅在边缘添加阴影以反转 c 径向渐变？

How to add shadow to reverse c radial gradient only at the edges?

css

shadow

radial-gradients

css-shapes