整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
习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凸边
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
边框可以是图片img，也可以是div元素，也可以是table，也可以是span
一、边框样式的三要素：
1、边框的宽度 border-width
2、边框的外观 border-style
3、边框的颜色 border-color
二、边框属性
语法：
border-width：像素值；
border-style: 属性值；none 无样式、dashed虚线、solid实线
border-color:关键字或者RGB值。举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
width=100px;
height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;
}
</style>
</head>
<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>
</body>
</html>
边框三个属性简写
语法：
border:1px solid red;
等价于
border-width:1px;
border-style: solid;
border-color:red;举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
</head>
<body>
<div>你好，嘻嘻</div>
</body>
</html>
三、局部样式
一个框有四个边，如果想单独设置一个边就需要单独设定
1、上边框border-top
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
简写为：
border-top: 1px solid red;2、下边框border-bottom
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
简写为：
border-bottom: 1px solid red;
3、左边框border-left
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
简写为：
border-left: 1px solid red;4、右边框border-right
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
简写为
border-right: 1px solid red;整体举例
建企业网站时使用CSS边框圆角是很容易的事，但要设置边框圆角的渐变效果就需要费些功夫了，需要正确理解几个CSS属性的含义，background-origin,background-clip,background-size这几个是必须用到的，调整好性能的数值就可以灵活运用了。
想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码：
<style>
div {
width: 500px;
height: 300px;
margin: 10px;
padding: 30px;
border-radius: 50px; /*设置圆角*/
border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/
background-origin:border-box; /*从边框开始背景图*/
background-clip:padding-box,border-box; /*设置第一个背景和第二个背景的范围*/
background-size:cover;
/*由于背景图像不能设置纯色，所以可以使用下面的方式设置纯色*/
background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30);
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>
<div>
<span class="a1">边框渐变色从内边框到边框，背景图像单独设置不重复。</span>
</div>background-origin表示的是背景起始位置，其三个值如下，依次是
border-box 从边框开始；
padding-box(默认) 从内边距开始；
content-box 从内容开始。
background-origin: border-box | padding-box(默认) | content-box
background-clip表示的是背景填充位置，其四个值如下，依次是
border-box(默认) 填充至边框；
padding-box 填充至内边距；
content-box 填充之内容；
text 作为字体前景色。
background-clip: border-box(默认) | padding-box | content-box | text
background-size表示的是背景尺寸，其五个值如下，依次是
contain 将图像扩大至适应最短的边，剩余部分默认重复图像
cover 将图像扩大至适应最长的边，图像可能显示不完整
length 两个值依次设置图像宽和高，未设置则为auto
percentage 两个百分比依次设置图像宽和高，未设置则为auto
auto 默认设置
*请认真填写需求信息，我们会在24小时内与您取得联系。
