整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一、基本线条：
1、<HR>
2、align线条位置（可选left、right、center）；width线条长度；color颜色；size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>二、特效（效果并不是孤立的，可相互组合）
1、两头渐变透明：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>2、纺锤形：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>3、右边渐变透明：
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>4、左边渐变透明：
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>5、虚线：
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>6、双线：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>7、立体效果：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>8、钢针效果：
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">９．垂直分割线
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代码：
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
习HTML时有时候我们需要用代码设置边框或虚线边框的样式，那该怎么设置呢？下面上海非凡进修学院HTML5开发培训机构大咖分享下html虚线边框设置教程，会对几个不同标签加虚线边框效果样式，同学们可以根据示例灵活掌握与应用到自己DIV+CSS布局中。
为了对html不同标签加边框虚线，我们选择几个常用标签对齐设置边框虚线效果。
1、html常用标签
div标签
span
ul li
table tr td
2、实例用到CSS属性单词
border
width
height
3、实现虚线的CSS重点介绍
border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线）
border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。
4、实例描述
我们对以上几个标签设置相同宽度、相同高度、边框效果。
5、HTML代码示例：
以上示例对html中不同标签设置相同的样式，包括相同边框虚线。
上海HTML5开发培训机构大咖提示边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。
1）、边框颜色：border-color:#000
2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。
3）、border边框样式：border-style:solid
上海HTML5开发培训机构大咖提示：边框border样式值如下：
none :无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid :实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge :根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
到css虚线样式，应该会想到border的solid，网页布局中solid用的概率最高了，要有css虚线的效果还可以用图片做背景，但是不推荐，尽量使用css虚线样式做这个虚线的效果，那么css虚线样式就是border中的dotted和dashed，这两种都是css虚线，但是他们是有区别的。
1.dotted虚线
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虚线！</div>
</body>
</html>
效果：
2.dashed虚线
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虚线！</div>
</body>
</html>
效果：
除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！
原文链接：http://tangjiusheng.com/divcss/115.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
