將border-radius應用於box-shadow，但不應用於div本身

Question

我想將邊框半徑應用於box-shadow而不是div本身，因此最終結果將是左側的圓角陰影與div呈90度角。

 .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

框陰影不是元素。 您不能向效果添加邊界半徑。

嘗試使用偽元素：

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

==編輯

如果您要拒絕投票，請寫評論以解釋原因 。 謝謝！