分割线

来源：互联网发布：linode 端口被拦截编辑：程序博客网时间：2024/05/05 02:04

1、这种一条线上面有字的那种

就是将span定位好，给个padding，再给跟底色一样的颜色遮盖一下就可以了。

html:

<div class="demo_line"><span>小小分隔线ghgdhfghfgjg</span></div>

css:

.demo_line{

height: 1px;

background：#eee;

text-align: center;

}

.demo_line span{

padding:0 20px;

position: relative;

top:-10px;

background: #fff;

}

2、分割线颜色渐变

/* 渐变 color1 - color2 - color1 */

hr.style-one {

border: 0;

height: 1px;

background: #333;

background-image: linear-gradient(to right, #ccc, #333, #ccc);

}

3、/* 透明渐变 - color - transparent */

hr.style-two {

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

}

其他的：http://www.gbtags.com/gb/linkviewer/10288.htm

0 0