如何将渐变效果添加到边框，如附加的图像

Question

我正在努力实现这样的div。我有蓝色背景和前景色。但我不知道如何让边界消失。

背景颜色： - ＃93cde9

前景色： - ＃c4e4f3

有人可以帮帮我吗？

Answer 1

div {
   box-shadow: 0px 0px 8px #ffffff; 
   -webkit-box-shadow: 0px 0px 8px #ffffff; 
   -ms-box-shadow: 0px 0px 8px #ffffff;
   -o-box-shadow: 0px 0px 8px #ffffff; 
}

看：http://jsfiddle.net/waS6F/2/：）

IE的解决方案： Box shadow in IE7 and IE8，CSS3 Box Shadow Effect for IE8?

希望有用！

Answer 2

可能使用box-shadow?

这是一个简单的小提琴：

http://jsfiddle.net/GLmQd/1/

以下是一些进一步阅读的链接

http://css-tricks.com/snippets/css/css-box-shadow/

https://developer.mozilla.org/en-US/docs/CSS/box-shadow

Answer 3

例如，您可以使用它。

<div id="img"><img ... /></div>

<style type="text/css">

#img{
border-style:1px solid green;
opacity: 0.3;
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opactiy .1s ease-in-out;
-ms-transition: opacity .1s ease-in-out;
-o-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
}

#img:hover{
opacity: 1;
    -webkit-transition: opacity .1s ease-in-out;
    -moz-transition: opactiy .1s ease-in-out;
    -ms-transition: opacity .1s ease-in-out;
    -o-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out;
}
</stlye>

Answer 4

这就是我实现它的方式： -

HTML： -

<div class="shadow-efect>
<div>

SASS： -

.shadow-effect
  background-color: #b9daeb
  -webkit-box-shadow: 0 0 10px 10px #b9daeb
  -moz-box-shadow: 0 0 10px 10px #b9daeb
  box-shadow: 0 0 10px 10px #b9daeb