在html中花一条线的方法是有很多的，一般可以直接使用html代码实现或者借助css代码来实现都是可以的。
方法1、使用<hr>标签画线
<html><body>
<p>hr 标签定义水平线：</p>
<hr />
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
结果如下：
方法2：使用css的border进行画线
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<div id="div1"></div>
<style>
#div1{
width: 500px
border-bottom: 1px solid red
}
</style>
</html>
结果如下：
一、普通1、横线
2、居中横线
<hr align=center width=300 color=#987cb9 size=1>
align 线条位置（可选left、right、center）；width线条长度；color颜色；size厚度
二、特效（效果并不是孤立的，可相互组合）
1、两头渐变透明
<hr style="filter: alpha(opacity=100, finishopacity=0, style=3)" width="80%" color=#987cb9 SIZE=3>
2、纺锤形
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>
3、右边渐变透明
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>
4、左边渐变透明
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>
5、虚线
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>
6、双线
<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
7、立体效果
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>
8、钢针效果
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>
9、垂直分割线
<table border="1px" cellpadding="0" cellspacing="0" style="height:265pxborder-left-style:solidborder-bottom-style:noneborder-right-style:noneborder-top-style:none">
1、你的问题信息比较少，不清楚你具体的需求是什么样的。2、在HTML中划线的话，使用 hr 标签就可以了。hr ，即为HTML中的水平分隔线。
3、阴影的话主要是使用 box-shadow属性，比如:box-shadow 10px 10px 5px red此属性即为阴影属性，可以控制方向、颜色、以及样式。
4、希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）