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

【问题标题】：How to add fading effect to border like the image attached如何像附加的图像一样向边框添加褪色效果
【发布时间】：2013-04-12 22:39:19
【问题描述】：

我正在尝试实现这样的 div。我有蓝色背景和前景色。但我不确定如何让边框褪色。

背景颜色：- #93cde9

前景色：- #c4e4f3

有人可以帮我吗？

【问题讨论】：

使用阴影.. 但它在 IE 8 或更低版本中不起作用:)

标签： html css sass

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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?

希望有用！

【讨论】：

【解决方案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>

【讨论】：

是的，您可以添加阴影而不是边框。盒子阴影：插图 0 0 10px #00FF00;

【解决方案4】：

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

【讨论】：