将边框半径应用于 box-shadow 但不应用于 div 本身答案

【问题标题】：Apply border-radius to box-shadow but not to the div itself将边框半径应用于 box-shadow 但不应用于 div 本身
【发布时间】：2016-04-13 04:50:09
【问题描述】：

我想将边框半径应用于box-shadow 而不是 div 本身，因此最终结果将是左侧带有 90 度角 div 的圆角框阴影。

.div-to-style {
    -webkit-box-shadow: -20px 0px 0px 0px blue;
    -moz-box-shadow: -20px 0px 0px 0px blue;
    box-shadow: -20px 0px 0px 0px blue;
    border-radius: 8px 8px 8px 8px;

    background-color: red;
    width: 200px;
    height: 50px;
    margin-left:40px;
}

<div class="div-to-style">
</div>

<p>
Want the red section to have a straight border on the left
</p>

https://jsfiddle.net/alair016/vdcohttk/

这个 CSS 的问题是 border-radius 被应用于 box-shadow 以及左侧的 div。

【问题讨论】：

你不能那样做，box-shadow 是一个元素的属性，而不是一个元素，正如 Paulie_D 上面所说的。您不能在属性上设置属性。您可以在另一个元素 (a) 下方创建一个透明 div (b)，并为该元素赋予与 (a) 相同的大小属性，但为其赋予边框半径和框阴影。然后它看起来好像你有一个带有圆形阴影的方形框（a）（来自框（b））

标签： html css border

【解决方案1】：

盒子阴影不是一个元素。您不能将边框半径添加到效果。

尝试使用伪元素：

.div-to-style {
  border-radius: 0 8px 8px 0;
  background-color: red;
  width: 200px;
  height: 50px;
  margin-left: 40px;
  position: relative;
}
.div-to-style::before {
  content: '';
  position: absolute;
  left: -20px;
  width: 20px;
  height: 100%;
  background: blue;
  z-index: -1;
  border-radius: 8px 0 0 8px;
}

<div class="div-to-style">
</div>

额外选项：无伪元素 - 渐变背景

.div-to-style {
  border-radius: 8px;
  background: linear-gradient(to right, blue, blue 20px, red 20px);
  width: 200px;
  padding-left: 20px;
  height: 50px;
  margin-left: 40px;
  position: relative;
}

<div class="div-to-style">
</div>

【讨论】：

刚刚实现了没有伪元素的奖励选项。正是我需要的。谢谢

【解决方案2】：

您可以使用伪元素来创建阴影，并将border-radius 应用于该伪元素。

工作示例：

.div-to-style {
    background-color: red;
    width: 200px;
    height: 50px;
    margin-left:40px;
}
.div-to-style:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
    -webkit-box-shadow: -20px 0px 0px 0px blue;
    -moz-box-shadow: -20px 0px 0px 0px blue;
    box-shadow: -20px 0px 0px 0px blue;
    border-radius: 8px 8px 8px 8px;
}

<div class="div-to-style">
</div>

<p>
Want the red section to have a straight border on the left
</p>

【讨论】：

【解决方案3】：

要点是，您需要 2 个 div。将盒子阴影和半径添加到外部 div，并将其他背景或边框样式添加到内部 div。

.div-to-style {
        -webkit-box-shadow: -20px 0px 0px 0px blue;
        -moz-box-shadow: -20px 0px 0px 0px blue;
        box-shadow: -20px 0px 0px 0px blue;
        border-radius: 8px 8px 8px 8px;
        margin-left: 40px;
    }

.inner-style {
  background-color: red;
        width: 200px;
        height: 50px;
}

<div class="div-to-style">
<div class="inner-style">
</div>
</div>

<p>
Want the red section to have a straight border on the left
</p>

这是一个代码示例： https://jsfiddle.net/vdcohttk/2/

== 编辑

如果您要投反对票，请写评论说明原因。谢谢！

【讨论】：