<分区>
<分区>
我想在 css 中模糊我的 hr，但我遇到了一些困难。 请帮助或建议....
hr {
clear:both;
margin-bottom: 0px;
border: 0;
height: 2px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
box-shadow: inset 0px -5px -20px -60px #000;
}
最佳答案
您可以使用多个背景功能，您需要指定第一个背景(后面的背景)垂直渐变(看起来像阴影)，而第二个背景(前面的背景)水平渐变(看起来像淡出):
hr {
clear:both;
margin-bottom: 0px;
border: 0;
height: 6px;
background-image: linear-gradient(to right, white, transparent, white),
linear-gradient(transparent, rgba(0,0,0,0.55) 150%);
background-image: -moz-linear-gradient(to right, white, transparent, white),
-webkit-linear-gradient(transparent, rgba(0,0,0,0.55) 150%);
background-image: -ms-linear-gradient(to right, white, transparent, white),
-webkit-linear-gradient(transparent, rgba(0,0,0,0.55) 150%);
}
请注意，我们使用颜色 white 作为父级的背景，目前此解决方案仅在父级具有纯色背景时才有效，否则颜色 white 将是鲜明而丑陋。
关于html - 在 css 中设置 <hr> 标签的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23736916/