css在元素

Question

我甚至不确定这是否可行，我希望在一个元素周围做一个看见＆＃34; border＆＃34; / cut-out。如下图所示，重点是使背景显示在中心的洋红色元素和灰色元素之间。

到目前为止，我所管理的是洋红色元素周围的纯色边框。使用以下类，这给了我想要的结果，但只在白色背景上。

.app.center {
  height: 40px;
  width: 28px;
  z-index: 5000;
  border-radius: 3px;
  box-shadow: 0 0 0 3px white;
}

请参阅此fiddle了解我的整个CSS。

根据评论中的建议设置透明边框并不能解决我的问题（在FF40中测试）。我试图在我的中间div元素（洋红色元素）周围创建一个透明的间隙。在此元素上设置透明边框不起作用。

我正在寻找一种方法来剪切落在中间div后面的兄弟div，这样在中间元素的两侧可以看到一小块背景，它遵循中心元素的边缘/形状。

Answer 1

如果您的目的可以通过“faux” -transparency来实现，那么您可以使用border-image。但是，这不是一个真正的解决方案。此外，当您使用border-radius时，您将失去border-image。

诀窍是使用与border-image相同的图像作为background-image在下层div或body上使用。这将通过处于较低级别的兄弟div给出透明剪辑的“幻觉”。

示例：

* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
    position: relative; background-color: #444;
    left: 200px; top: 100px; height: 100px; width: 200px;
    border-top-right-radius: 100px; border-top-left-radius: 100px;
    text-align: center; padding-top: 10px; color: white;
}
.app {
    position: absolute; transform-origin: center 75px; background: #cc4489;
    border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
    transform: scale(0.9) rotate(-30deg);
    background: #adabae; top: -72px; 
}
div.sphere > .app:last-child {
    transform: scale(0.9) rotate(30deg);
    background: #79787a; top: -72px;
}
.app.center {
    height: 64px; width: 52px; z-index: 5000;
    background-clip: padding-box; background-origin: padding-box;
    border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
    border-width: 5px;
}

<div class=" sphere">
    <div class="app"></div>
    <div class="app center">3</div>
    <div class="app"></div>
</div>

小提琴：http://jsfiddle.net/abhitalks/aoh8vc8v/

适用于你的小提琴：http://jsfiddle.net/abhitalks/L6deaazy/3/

免责声明：这是 faux 剪辑。 clip-path和mask可以更好地投入使用。

Answer 2

是的，这基本上是不可能的。这就是我试图提供答案的原因： - ）

我的解决方案不适用于IE，并限制您在元素中使用原色。据我所知，这是获得这一结果的唯一途径。

诀窍是使用混合模式，将灰色转换为透明。元素的边框将是灰色的，因此将显示基础背景

＆＃13;

＆＃13;

.bkg {
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}

.button {
	width: 100px;
	height: 100px;
	border-radius: 20%;
	border: solid 10px gray;
	position: absolute;
	font-size: 80px;
}

#bt1 {
	left: 40px;
	top: 20px;
	background-color: red;
}

#bt2 {
	left: 80px;
	top: 90px;
	background-color: rgb(255,0,255);
}

.panel {
	position: absolute;
	top: 0px;
	width: 200px;
	height: 200px;
	mix-blend-mode: hard-light;
}

＆＃13;

<div class="bkg"></div>
<div class="panel">
    <div class="button" id="bt1">-1-</div>
    <div class="button" id="bt2">-2-</div>
</div>

＆＃13;

＆＃13;

＆＃13;