Question

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

jsFiddle demo

我正在使用bootstrap，所以我不认为只是制作另一个＆＃34;渐变＆＃34;图像会更简单。

另外，我已尝试妥协：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>

Answer 2

根据我的理解，您需要在元素上使用渐变效果填充边框。

可以使用边框图像，但边界半径不起作用。

如果您的内部背景为黑色实体，则可以设置不同的背景，并使用受每个背景影响的区域（背景剪辑和背景原点）进行播放

在摘录中，有两个示例，一个是径向渐变，另一个是线性渐变

最好的解决方案是边框仍然是边界。您可以通常的方式设置宽度，半径等

.test {
  width: 250px;
  height: 200px;
  display: inline-block;
  margin: 5px;
  border-radius: 20px;
  border: solid 10px transparent;
}

#test1 {
    background: linear-gradient(black, black), 
        radial-gradient(circle at left top, red 30px, transparent 150px),
      radial-gradient(circle at right top, blue 30px, transparent 150px),
      cyan;
    background-clip: content-box, border-box, border-box, border-box;
  background-origin: content-box, border-box, border-box, border-box;
}

#test2 {
    background: linear-gradient(black, black), 
        linear-gradient(to bottom right, red 30px, transparent 150px),
      linear-gradient(to bottom left, blue 30px, transparent 150px),
      cyan;
    background-clip: content-box, border-box, border-box, border-box;
  background-origin: content-box, border-box, border-box, border-box;
}

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>

Answer 3

您可以使用单个元素执行此操作，并将伪元素用作边框。这可能比border-image具有更高的浏览器兼容性。

模拟演示

html,
body {
  margin: 0;
  padding: 0;
}
html {
  background: #222;
}
div {
  height: 200px;
  width: 200px;
  background: gray;
  position: relative;
  border-radius: 10px;
  margin: 20px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  border-radius: inherit;
  height: 110%;
  width: 110%;
  z-index: -1;
  background: linear-gradient(to bottom right, rgba(250, 50, 50, 0.5), rgba(50, 150, 250, 0.5)), linear-gradient(to bottom left, blue 30px, transparent 150px);
  box-shadow: inset 0 0 10px 5px #222;
}

<div></div>

Answer 4

这仅使用CSS Grid，而不是JavaScript。检查一下，看看这是否是您正在寻找的

https://codepen.io/dszlauer/pen/RLjwZq?editors=1100#

 <html>
  <body>
    <div class="grid">
      <div class="blurBox"></div>
      <div class="inputBox">
        <div class="fName">f</div>
        <div class="lName">l</div>  
      </div>
    </div>
  </body>
</html>

body {
  background-color: black;
  color: white;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
  //border: 1px solid white;  
}

.blurBox {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
  background: linear-gradient(-45deg, red, blue);
  filter: blur(5px);
  border-radius: 5px;
}

.inputBox {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
  margin: 7px;
  background: black;
  border: 1px solid white;
  border-radius: 5px;
  z-index: 1;
}

.fName {
  margin: 20px;
  border: 1px solid white;
}

.lName {
  margin: 20px;
  border: 1px solid white;
}

css div渐变阴影/边框

4 个答案: