重疊CSS上的白色邊框

Question

可以使用CSS創建嗎？

我嘗試使用PNG圖片：

 .x { position:relative; top: 100px; left: 0px; height: 120px; width: 300px; display: block; } .y { position:relative; top: -20px; left: 0px; height: 120px; width: 300px; display: block; transform: rotate(60deg); } .z { position:relative; top: -140px; left: 0px; height: 120px; width: 300px; display: block; transform:rotate(-60deg) } 

 <img class="x" src="http://i.stack.imgur.com/Qf8Ot.png"> <img class="y" src="http://i.stack.imgur.com/Qf8Ot.png"> <img class="z" src="http://i.stack.imgur.com/Qf8Ot.png"> 

但是我希望重疊部分是白色的，作為第一張圖像。 有什么線索嗎？ 非常感謝你。

Answer 1

使用border-radius創建橢圓。

給他們添加box-shadow ：

 #a, #a:before, #a:after { height:80px; width: 300px; background: transparent; border-radius: 50%; border: 5px solid black; transform: rotate(30deg); } #a { position: relative; top:100px; } #a:before, #a:after { position: absolute; content: ""; box-shadow:inset 0 0 0 4px white, 0 0 0 4px white; } #a:before { transform: rotate(60deg); } #a:after { transform: rotate(120deg); } 

 <div id="a"></div> 

Answer 2

您應該使用盒子陰影。 使陰影顏色為白色。

也使用插入陰影，它將在圖像內部產生陰影。

box-shadow :inset 0 0 5px #FFF, 0 0 5px #FFF ;

根據您的瀏覽器要求使用-webkit-，-moz-，-o-。