【问题标题】：Inner rounded shadows inside divdiv内部的圆形阴影
【发布时间】：2022-02-11 02:02:21
【问题描述】：

我有一个看起来像这样的 div：

.box{
 box-sizing: border-box;
 border: solid 0.01rem #2e2e2e;
 border-radius: 3px;
 width:100px;
 height:100px;
 background:red;
 }

&lt;div class="box"/&gt;

我正在努力实现这种效果。我怎样才能让这个盒子从 div 内部看起来有这样的阴影？

【问题讨论】：

标签： html css

【解决方案1】：

.box {
  box-sizing: border-box;
  border-radius: 10%;
  width: 100px;
  height: 100px;
  background: linear-gradient(270deg, red, #c10606);
  position: relative;
}

.box:before {
  position: absolute;
  content: '';
  top: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
  background: linear-gradient(90deg, red, #c10606);
  border-radius: 12%;
  filter: blur(1px);  /* optional for a softer effect */
}

/* optional layout and styling for box contents */
.box {
  display: flex;
  align-items: center;
  text-align: center;
  font-family: arial;
  color: #ddd;
  font-weight: bold;
}

.box * {
  position: relative;  /* puts interior content over the pseudo-element */
}

<div class="box">
  <span>Interior content</span>
</div>

【讨论】：

【解决方案2】：

CSS `box-shadow`

我认为@isherwood 发布的答案最适合您的用例。但是，有一种方法可以通过将box-shadow 的最后一个参数设置为inset 来使阴影显示在元素的内部。不过，这个解决方案有一些问题。一些我无法实现的事情：

我无法实现阴影的线性渐变。
我无法为阴影的内边界提供border-radius。

div.box {
  background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
  height: 100px;
  width: 100px;
  box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
  border-radius: 10px;
}

&lt;div class="box"&gt;&lt;/div&gt;

参考：How to create an inner shadow using CSS

【讨论】：

【解决方案3】：

嗯，我编辑了你的代码。这里是the demo。

基本上，我又添加了一个 div 并添加了一些样式。希望它能给你一个想法。

另外，我在下面添加了一个sn-p：-

.box {
  box-sizing: border-box;
  border: solid 0.01rem #2e2e2e;
  border-radius: 15px;
  width: 100px;
  height: 100px;
  background: red;
  padding: 10px 0px 10px 0px;
}

.inner-div {
  box-sizing: border-box;
  border-radius: 15px;
  width: 78px;
  height: 78px;
  background: #ee1717;
  margin: 0 auto;
}

<div class="box"/>
<div class="inner-div"></div>
<div>

快乐编码??

【讨论】：

背景渐变是这个效果的一个关键方面。

CSS box-shadow

CSS `box-shadow`