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相当容易实现。使用这些，您的标记保持清洁。

Example

Demo JSFiddle

在这里，我在最低层用:after分层元素。这是包含box-shadow的图层。在右下方意味着相邻元素之间没有阴影重叠。它绝对定位于与元素本身对齐。

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

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

所有图层都有border-radius: 100%，以使它们可以围绕元素的大小。

层分解：

enter image description here

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 example

请注意，每个浏览器（reference）都不支持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 example

Answer 3

哼，我唯一能想到的就是使用z-index将较小的气泡放在第一个气泡的前面，但它会有整个边框，而不是例如正如博兹所说，我不认为这是可能的

在CSS中组合2个气泡

3 个答案:

层分解：

HTML

CSS