重叠 CSS 上的白色边框答案

【问题标题】：White border on overlap CSS重叠 CSS 上的白色边框
【发布时间】：2015-03-29 14:46:11
【问题描述】：

这可以使用 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">

但我希望重叠在第一张图像中是白色的。有什么线索吗？非常感谢。

【问题讨论】：

stackoverflow.com/questions/3186688/…
@Petah 好的，谢谢，但仅在 CSS 中呢？

标签： html css

【解决方案1】：

你应该使用 box-shadow。将阴影的颜色设为白色。

也可以使用嵌入阴影，它会在图像内部产生阴影。

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

根据您的浏览器要求使用 -webkit-、-moz-、-o-。

【讨论】：

这行不通。多个box-shadows需要用逗号(,)隔开。

【解决方案2】：

使用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);
}

&lt;div id="a"&gt;&lt;/div&gt;

【讨论】：