Html 造型<；人力资源>；css中的标记

我想在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

标记，使用PNG而不是

例如：

因此，将像这样的图像放入

img

标记或

div

标记中，作为

背景图像：

---

注意：如果您将“hr图像”放在

div

标签中，您只需调整高度并将宽度设置为100%（或您想要的尺寸），因为它将水平重复。

定义“困难”您的代码似乎工作正常？怎么了？使用css伪元素，如

：before

和

：after

来实现这一点这里有一个exmaple@KingKing。我希望我的人力资源与网站上的完全相同。但是我真的没有经验，所以我不知道从哪里开始。如果有帮助的话，他们已经使用了。使用图像当然有它自己的优势，但是CSS总是一种轻量级和首选的方式（节省带宽），您可以轻松地更改颜色和许多其他功能，而无需重新设计图像。

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