例

设置border-img-outset属性：

div

{

border-image-source: url(border.png);

border-image-outset: 30 30;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性定义及使用说明

border-image-outset用于指定在边框外部绘制 border-image-area 的量

语法

border-image-outset: length|number;

注意： border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

习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凸边

ss的标签有很多，本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。

（1） css的文字属性标签

文字颜色： color: #ffffff;

文字样式： font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体大小：font-size:16px;

文字行高： line-height: 30px;

文字粗细： font-weight: bold;(粗体) lighter;(细体) normal;(正常)

文字修饰： text-decoration:line-through; (加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)

对齐方式： text-align:right; (文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)

使用练习：我们随机书写一段文字，设置文字的颜色为红色，字体样式为斜体，字体大小为20px，行高为35px，字体加粗，加下划线，并是文字居中对齐；那么我们的代码就如下所示：

在网页中的显示效果就如下图所示：

（2）css背景样式

背景样式：background:#f00; (红色背景)background-image : url(/image/bg.gif); (背景图片)background-repeat : repeat;(重复排列-网页默认)background-repeat : no-repeat;(不重复排列)background-repeat : repeat-x; (在x轴重复排列)background-repeat : repeat-y; (在y轴重复排列)

（3）css边框样式

边框样式：border-top : 1px solid #f00; (上框线)border-bottom : 1px solid #f00; (下框线)border-left : 1px solid #f00; (左框线)border-right : 1px solid #f00; (右框线)border:1px solid #f00;(上下左右边框)

其他框线样式：solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)

（4）css内边距以及外边距属性

内边距样式：padding-top:10px; (上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px; (下边框留空白)padding-left:10px;(左边框留空白)

也可以简写成padding:10px 10px 10px 10px;(分别对应上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

外边距样式：margin-top:10px; (上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px; (下边界留空白)margin-left:10px;(左边界留空白)

也可以简写成margin:10px 10px 10px 10px;(分别对应上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

使用练习：我们随机书写一段文字，设置文字的背景为灰色，边框为红色 2px 实线框，内边距为10px，外边距为10px；那么我们的代码就如下所示：

在网页中的显示效果就如下图所示：

对于css的常用标签今天就先介绍到这里，大家在平时可以自己多加练习练习，熟练一下各个标签的作用。

每日金句：有时候死扛下去总是会有机会的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。