html - css div 渐变阴影/边框

Question

我正在努力实现这一目标:

我找不到类似的东西，但这是我失败的尝试:

#one {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #2D8DBD;
  left: 50px;
  display: inline-block;
  margin-right: -100px;
}
#two {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #B22D2D;
  left: -50px;
  display: inline-block;
  margin-left: -50px;
  z-index: -1;
}

<center>
  </br>
  </br>
  <div id="one"></div>
  <div id="two"></div>
</center>

jsFiddle demo .

我正在使用 bootstrap，所以我不认为只制作另一个“渐变”图像会更简单。

此外，我已经尝试为此做出妥协:http://designposts.net/fresh-free-css3-and-html5-tutorials/但是我的图像被圈起来了，所以它变成了一个切割的正方形。

Answer 1

你可以伪造一个，使用背景渐变和盒子阴影，以及一个 css 伪元素来掩盖边框。请注意，如果您更改周围内容的背景颜色，则必须更改 #444

的每个实例

.outer {
    box-sizing: border-box;
    padding: 25px;
    height: 200px;
    width: 200px;
    box-shadow: 0px 0px 10px 10px #444 inset;
    border-radius: 50%;
    background: linear-gradient(to bottom right, rgb(250,50,50), rgb(50,150,250));
}
.outer::before {
    content: "";
    display: block;
    position: relative;
    left: -26px;
    top: -26px;
    height: 202px;
    width: 202px;
    border-radius: 50%;
    border: 3px solid #444;
    box-sizing: border-box;
}
.inner {
    position:relative;
    top: -204px;
    left: -3px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #ee2135, #6279ff);
    padding: 2px;
    height: 150px;
    width: 150px;
    box-shadow: 0px 0px 30px -5px black;
}
.content {
    height: 100%;
    width: 100%;
    background: #444;
    border-radius: 50%;
}

/* Styling only past here */
html, body {
    text-align: center;
    padding: 0px;
    margin: 0px;
    height: 100%;
    background: #444;
}
body::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.outer {
    display: inline-block;
    vertical-align: middle;
}

<div class="outer">
    <div class="inner">
        <div class="content">
        </div>
    </div>
</div>