Question

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

＆＃13;

.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;
}

＆＃13;

<div class="div-to-style">
</div>

<p>
Want the red section to have a straight border on the left
</p>

＆＃13;

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

此CSS的问题在于border-radius应用于box-shadow以及左侧的div。

Answer 1

框阴影不是元素。您无法将border-radius添加到效果。

尝试使用伪元素：

.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>

Answer 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>

Answer 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/

==编辑

如果您要进行投票，请撰写评论 why 。谢谢！

将border-radius应用于box-shadow，但不应用于div本身

3 个答案:

工作示例：