css - 在 CSS 中组合 2 个气泡

Question

我正在努力在 CSS http://www.oinobareion.at/files/css_bubble.png中设计这个元素

打一个泡泡没问题：

.bubble_yellow {
    border-radius: 50%;
    width: 100px;
    height: 100px; 
    border-radius: 100px;
    background: #facf35;
    border: solid 16px #fff0cf;
}

但是我怎样才能以某种方式将较小的气泡“包含”到另一个气泡的形状中呢？CSS甚至可以吗？

谢谢你的帮助！

Answer 1

使用 CSS 伪元素:before和:after. 使用这些，您的标记将保持干净。

演示 JSFiddle

在这里，我:after在最低层对元素进行分层。这是上面的图层box-shadow。在底部有这个权利意味着相邻元素之间没有阴影重叠。它绝对定位为与元素本身对齐。

接下来是:before伪元素。这也是绝对定位的，并且具有黄色背景以提供黄色边框效果。

最后是元素本身，在演示中是橙色的。

所有层都border-radius: 100%必须使它们围绕元素可能的大小。

层分解：

HTML

<div id="blubbles">
    <div class="bubble" id="small"></div>
    <div class="bubble" id="large"></div>
</div>

CSS

#blubbles {
    position: relative;
    z-index: 5;
    width: 300px;
    height: 300px;
    padding: 10px;
}

.bubble {
    position: absolute;
    background: #f60;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

/* Yellow border */
.bubble:before {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    content: "";
    background: yellow;
    border-radius: 100%;
    z-index: -1;
}

/* Box shadow */
.bubble:after {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    content: "";
    z-index: -2;
    box-shadow: 0 0 20px #000;
    border-radius: 100%;
}

#small {
    width: 80px;
    height: 80px;
}
#large {
    width: 300px;
    height: 300px;
}

Answer 2

这是一个有效的解决方案。它结合了使用filter: drop-shadow在形状周围创建阴影和一些绝对定位来隐藏边框。

HTML

<div class="orbs">
    <div class="big"></div>
    <div class="small"></div>
    <div class="big-overlay"></div>
</div>

CSS

.orbs
{
    position:relative;
    margin:50px;

    -webkit-filter: drop-shadow(0 0 20px black);
}

.orbs div
{
    border-radius:50%;
    background-color:red;
    border:5px solid orange;
    position:absolute;
}

.big
{
    z-index:1;
    width:400px;
    height:400px;
}

.small
{
    z-index:2;
    width:60px;
    height:60px;
    position:absolute;
    top:20px;
    left:20px;
}

.big-overlay
{
    z-index:3;
    width:400px;
    height:400px;
    top:5px;
    left:5px;
    background-color:red !important;
    border:0 !important;
}

JSFiddle 示例。

请注意，filter:并非所有浏览器都支持 CSS 属性（目前）（参考），并且该演示仅适用于-webkit-启用的浏览器。

== 更新 ==

在查看Bojangles的出色答案并将其与我的结合时，您可以仅使用一个 HTML 元素来创建此形状。

HTML

<div class="shape"></div>

CSS

.shape
{
    margin:50px;
    width:400px;
    height:400px;
    border-radius:50%;
    z-index:1;

    background-color:red;
    border:5px solid orange;
    position:absolute;

    -webkit-filter: drop-shadow(0 0 20px black);
}

.shape:before
{
    content:'';
    display:block;
    z-index:2;
    width:60px;
    height:60px;
    position:absolute;
    top:20px;
    left:20px;

    border-radius:50%;
    background-color:red;
    border:5px solid orange;
    position:absolute;
}

.shape:after
{
    content:'';
    display:block;
    z-index:3;

    width:400px;
    height:400px;
    border-radius:50%;
    background-color:red !important;
    border:0 !important;
    position:absolute;
}

JSFiddle 示例。

Answer 3

嗯，我唯一能想到的就是使用 z-index 将较小的气泡放在第一个前面，但它会有整个边框，不像 boz 说的例子，我不认为它是否则可能