Blur rectangle-shaped div edges?

问题: Is there a way to blur rectangle-shaped div? As you can see on image below, it should be blurred to white color where "X" letters are. Is this possible in CSS? 回答1:...

问题:

Is there a way to blur rectangle-shaped div? As you can see on image below, it should be blurred to white color where "X" letters are. Is this possible in CSS?

enter image description here


回答1:

If your "x" letters not fixed with the background then you will blur the 'x' letters in css. First call your 'x' letters and past this line in your css { filter: blur(10px); }.


回答2:

I might not use filter: blur() on your div element, as it might blur the contents of whatever inside your div element.

Assuming that "X" letters are just a mark where you would want a white blur to occur, I would suggest a box-shadow method.

.blur {
  background: purple;
  text-align: center;
  padding:10px;
  height: 100px;
  width: 200px;
  filter: blur(2px);

}
.boxShadow {
  background: purple;
  text-align: center;
  padding:10px;
  height: 100px;
  width: 200px;
  box-shadow:  inset 0 0 8px 10px white;

}
<div class="blur">
  <p><font color="white">Blur</font></p>
</div>

<div class="boxShadow">
  <p><font color="white"> Box-shadow </font></p>
</div>

  • 发表于 2019-01-11 01:13
  • 阅读 ( 208 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除