繪製一個圓形陰影的方形元素與CSS

是否有可能一個方形元素下創建一個一輪影子（用設置爲零的傳播價值整齊的圓圈）？例如沒有圓角的DIV。繪製一個圓形陰影的方形元素與CSS

我有以下元件，我還可以標記不能添加到：

<div class="square"></div>

此外，我不能使用:before和:after僞元素，因爲它們已經樣式。這就是爲什麼我要改變盒子的陰影。

我聯繫的，我想達到什麼樣的一個例子，只是爲了更好地解釋視覺：

https://jsfiddle.net/landzup/L275p85L/

我用:before僞元素只顯示結果。

來源

2017-10-10 Emanuele Del Grande

我有一個很難想象這...這看起來像一個圓圈包圍的正方形/長方形？有兩個div，一個外部透明背景呢？ – JCOC611

你能分享你需要的圖片嗎？這有點令人困惑 –

有一對夫婦的方式去做。我只是簡單地把方形div放在一個更大的容器div中，然後如你所願地設計它。我已經包含了幾個例子給你。

我希望這有助於！ - 詹姆士。

.square { 
 
    width: 20px; 
 
    height: 20px; 
 
    display: block; 
 
    position: relative; 
 
    background: #fff; 
 
    opacity: 1; 
 
    margin: 5px 0 0 5px; 
 
} 
 

 
.circle,.circle-with-spread { 
 
    display: block; 
 
    background-color: #000; 
 
    opacity: 0.3; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    position: absolute; 
 
} 
 

 
.circle-with-spread { 
 
    box-shadow: 0 0 5px 5px rgba(0,0,0,1); 
 
}

<!-- Example Circle Shadow --> 
 
<div class="circle"> 
 
    <div class="square"></div> 
 
</div> 
 
<!-- Spacing makes it look nice --> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<!-- Second Example --> 
 
<div class="circle-with-spread"> 
 
    <div class="square"></div> 
 
</div>

來源

2017-10-10 17:39:52

親愛的詹姆斯，謝謝你的迴應。對不起，我想我還沒有足夠清楚：我也不能超越DIV進一步增加標記的款式，也可以使用僞元素。我擁有的唯一空間就是通過CSS屬性製作陰影。我調查的box-shadow屬性，但我並沒有達成一個解決方案，所以我想，如果本身我失去了一些東西，如果有一隻兔子拉出缸...... –

我編輯的問題，以更好地說明問題。 –

我現在明白了。據我所知，沒有使用僞元素，標記或JavaScript的方式來實現你想要的東西。有幾個*關閉*替代品，但它們並不完美。添加'box-shadow：0 0 30px 0＃000;'給你圓形的影子，但它已經擴散，或者加上'box-shadow：0 0 0 30px＃000;'給你沒有傳播的影子，但它是方形的。 - 抱歉，我無法幫助你。 –

繪製一個圓形陰影的方形元素與CSS

回答

相關問題