例

設置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的常用標簽今天就先介紹到這里，大家在平時可以自己多加練習練習，熟練一下各個標簽的作用。

每日金句：有時候死扛下去總是會有機會的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。