CSS div渐变阴影/边框

Question

I am trying to achieve this:

I couldn't find anything like it, but here is my failed attempt:

 #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 .

I am using bootstrap, so I don't think just making another "gradient" image would be simpler.

Also, I have tried compromising for this: http://designposts.net/fresh-free-css3-and-html5-tutorials/ but my image is circled, and so it turns out as a cut square.

Answer 1

You can fake one, using background gradient and a box-shadow, as well as a css pseudo element to mask the border. Note that if you change the background color of the surrounding content you have to change every instance of #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

As I understand your request, you need a border on the element that is filled with a gradient effect.

That could be get with a border-image, but then the border-radius wouldn't work.

If your inner background is black solid, that can be achieved setting different backgrounds, and playing with the zone affected by each one (with background-clip and background-origin)

In the snippet, 2 examples, one with radial gradients and the other with linear gradients

The best about that solution is that the border is still a border. You can set the width, the radius, and so on, the usual way

 .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

You may be able to do this with a single element, in conjunction to a pseudo element to act as the border. This may have a higher browser compatibility than border-image .

mock up demo

 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

This is done with just CSS Grid, no JavaScript. Check it out and see if this is what you are looking for

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