HTML 几种特别分割线特效

html-css017

HTML 几种特别分割线特效,第1张

点评:HTML 分割线特效,挺实用与漂亮的分隔线,需要的朋友可以参考下。一、基本线条二、特效(效果并不是孤立的,可相互组合) 1、两头渐变透明:?/p>2、纺锤形:?/p>3、右边渐变透明:?/p>4、左边渐变透明:?/p>5、虚线:?/p>6、双线:?/p>7、立体效果:?/p>8、钢针效果:9.垂直分割线align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度点评:HTML 分割线特效,挺实用与漂亮的分隔线,需要的朋友可以参考下。一、基本线条二、特效(效果并不是孤立的,可相互组合) 1、两头渐变透明:?/p>2、纺锤形:?/p>3、右边渐变透明:?/p>4、左边渐变透明:?/p>5、虚线:?/p>6、双线:?/p>7、立体效果:?/p>8、钢针效果:9.垂直分割线

1、要设置隔开线可以使用border标签。打开Hbuilder编辑器,新建一个html空白文档,输入基本的结构,css样式里让li标签左浮动并加入简单的样式:

2、在css里设置border-left的样式,然后需要使用“:first-chirld”伪类让第一个li标签的border消失:

3、最后保存一下,在软件右侧的浏览器就可以观察到最终效果了。以上就是给li标签加割线的操作:

这个应该不是分割线。

如果是两条分割线,设置属性display:inline-block.

例子:

<div style=" width:100%text-align:center"> //设置居中

<hr style=" width:20%display:inline-block" /> 中间插入的文字<hr style=" width:20%display:inline-block" />

</div>