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

Question

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

下面是示例图像的链接，我试图仅在角落添加阴影

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

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 来创建边框角勺形状，因此只需在中间添加一个额外的颜色停止位置即可产生阴影效果。

在下面的 sn-p 中，我们使用以下渐变（对于每个角）：

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>

---

如果您想产生类似于 cmets 中提供的图像的输出，请查看下面的 sn-p。这个sn-p的工作原理和上面解释的一样：

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>