Question

我想在CSS中模糊我的小时但是我有一些困难。请帮忙或建议......

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

Answer 1

你可以使用多个背景功能，你需要指定垂直渐变的第一个背景（后面的一个）（看起来像一个阴影），而第二个背景（前面的一个）是水平渐变的（看起来像褪色）：

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将是不同的并且显示丑陋。

Demo.

Answer 2

嗯，在这种情况下，解决问题没有太多困难的最佳方法是忘记使用hr标记并使用 PNG 而不是。

示例： http://i.stack.imgur.com/r116W.png

因此，将此类图像放在img标记 OR div标记中background-image:。

注意：如果您将“hr图像”放在div标记中，则只需调整高度并将宽度设置为100％（或您想要的尺寸），因为它会重复水平。

在css中设置样式<hr />标记

2 个答案:

Demo.