美化HR标签,看起来不土。但是不要太浪费时间去调整。没有美工,纯CSS自己设计完成。
/*内嵌水平线*/ hr.style-one { width: 80%; margin: 10px auto; border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
/*透明渐变水平线*/ hr.style-two { width: 80%; margin: 10px auto; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
/*渐变*/ hr.style-three { width: 80%; margin: 10px auto; border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); }