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

Question

我想将边框半径应用于 box-shadow 但不是 div 本身，因此最终结果将是左侧的圆 Angular 框阴影，带有 90 度 Angular 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。

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>