<hr>两边淡化效果。

xiny120

发布于 2020-05-18 07:28:18

33900

代码可运行

文章被收录于专栏：毛毛v5毛毛v5

运行总次数：0

代码可运行

hr.normal {
                    background: #ddd;/*改变现代浏览器下线条色*/
                    color: #ddd;/*改变ＩＥ浏览器下线条色，最好和Background-color设置一样的色*/
                    clear:both;/*可以用来清除浮动*/
                    float: none;/*取消浮动，可以不设置*/
                    width: 100%;/*显式定义宽度*/
                    height: 1px;/*改变部分浏览器下的默认高度*/
                    line-height: 1px;/*保证ＩＥ下高度效果一致，不留白色空白区*/
                    font-size: 0;/*设置为0，以确保IE6下不留空白区*/
                    border: none 0;/*取消默认边框，以背景和高度代替边框效果*/
                    margin: 0 0 1.4em;
                }

收藏一个

标签两边淡化效果css

<hr class="faded" />
            
                hr.faded {
                  clear: both; 
                  float: none; 
                  width: 100%; 
                  height: 1px;
                    line-height: 1px;
                    font-size: 0;
                    border: none 0;
                  margin: 1.4em 0;
                  border: none; 
                  background: #ddd;
                  background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, rgb(255,255,255)), color-stop(0.1, rgb(221,221,221)),color-stop(0.9, rgb(221,221,221)),color-stop(1, rgb(255,255,255)));
                 background-image: -webkit-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
                  background-image: -moz-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
                  background-image: -o-linear-gradient(left center,rgb(255,255,255) 0%,rgb(221,221,221) 10%,rgb(221,221,221) 90%,rgb(255,255,255) 100%);
                }

还有个浮雕效果

hr.carved {
                  clear: both; 
                  float: none; 
                  width: 100%; 
                  height: 2px;
                    line-height: 2px;
                    font-size: 0;
                  margin: 1.4em 0;
                  border: none 0; 
                  background: #ddd;
                  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.5, rgb(221,221,221)),color-stop(0.5, rgb(255,255,255)));
                  background-image: -webkit-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
                  background-image: -o-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
                  background-image: -moz-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
                }