Question

我已经阅读了很多关于这个问题的话题，但到目前为止还没有任何工作。我读过的最简单的方法是使用盒子阴影，但这会导致阴影的颜色与盒子的颜色不同，即使颜色的代码是相同的（＃141414）。

问题

如何为div框获取淡出/模糊边框？这很难以书面形式解释，所以我制作了这个图像给你的想法（忽略背景）。如果你仔细观察，你可以看到混合，颜色是均匀的，渐渐变为透明。

enter image description here 我说的盒子阴影对我不起作用。

body {
  background-image:url('http://phptesting.altervista.org/tessuto.png');
    background-repeat: repeat;
  }

div {
  width: 300px;
  height: 300px;
    background-color: #141414;
    border: 2px solid #141414;
    box-shadow: 0 0 5px 5px #141414;
    border-radius: 10px;
}

<html>
  <body>
<div></div>
    </body>
  </html>

Answer 1

box-shadow实际上是获得此效果的唯一CSS方式。尝试这样的事情：

＆＃13;

div {
  margin: 25px 10px;
  width: 100px;
  height: 100px;
  background: #141414;
  box-shadow: 0 0 15px 10px #141414;
}

＆＃13;

<div></div>

＆＃13;

Answer 2

通过褪色效果更改颜色

#yourIDhere:hover{
    transition-property: border-color;
    transition-duration: 0.5s;
    border-color: #976958;
}

如何用css淡出/模糊div的边界？

2 个答案: