相关疑难解决方法(0)

仅使用CSS创建漂亮的水平线

有一个教程在这里就如何做到这一点在Photoshop:

在此输入图像描述

我只想用CSS做这件事.我能越接近就是这个小提琴.

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    box-shadow: 0px -2px 4px rgba(136,136,136,0.75);
}
Run Code Online (Sandbox Code Playgroud)
<hr class="fancy-line"></hr>
Run Code Online (Sandbox Code Playgroud)

在阴影上做渐变似乎很难.有什么想法我可以改进吗?

css css3

21
推荐指数
1
解决办法
9万
查看次数

标签 统计

css ×1

css3 ×1