html - 如何像附加的图像一样向边框添加褪色效果

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 的解决方案： IE7 和 IE8中的盒子阴影，IE8 的CSS3 盒子阴影效果？

希望有用！

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

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

html:-

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

萨斯：-

.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

Answer 4

例如，您可以使用它。

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