整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
設(shè)置border-img-outset屬性：
div
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
屬性定義及使用說明
border-image-outset用于指定在邊框外部繪制 border-image-area 的量
| 默認(rèn)值: | 0 |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.borderImageOutset="30 30" |
語法
border-image-outset: length|number;
注意： border-image-outset用于指定在邊框外部繪制 border-image-area 的量。包括上下部和左右部分。如果第四個(gè)值被省略，它和第二個(gè)是相同的。如果也省略了第三個(gè)，它和第一個(gè)是相同的。如果也省略了第二個(gè)，它和第一個(gè)是相同的。不允許border-im-outset擁有負(fù)值。
| 值 | 描述 |
|---|---|
| length | |
| number | 代表相應(yīng)的border-width 的倍數(shù) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
習(xí)HTML時(shí)有時(shí)候我們需要用代碼設(shè)置邊框或虛線邊框的樣式，那該怎么設(shè)置呢？下面上海非凡進(jìn)修學(xué)院HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖分享下html虛線邊框設(shè)置教程，會(huì)對(duì)幾個(gè)不同標(biāo)簽加虛線邊框效果樣式，同學(xué)們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。
為了對(duì)html不同標(biāo)簽加邊框虛線，我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。
1、html常用標(biāo)簽
div標(biāo)簽
span
ul li
table tr td
2、實(shí)例用到CSS屬性單詞
border
width
height
3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹
border為邊框?qū)傩裕绻獙?shí)現(xiàn)對(duì)象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽?shí)線還是虛線）
border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px，虛線，虛線為紅色。
4、實(shí)例描述
我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。
5、HTML代碼示例：
以上示例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式，包括相同邊框虛線。
上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖提示邊框三個(gè)樣式
通常我們可以對(duì)邊框設(shè)置寬度（厚度）、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。
1）、邊框顏色：border-color:#000
2）、邊框厚度（寬度）：border-width:1px
使用數(shù)字+單位設(shè)置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數(shù)字，大于0的數(shù)值。否則設(shè)置邊框border樣式無效。
3）、border邊框樣式：border-style:solid
上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖提示：邊框border樣式值如下：
none :無邊框。與任何指定的border-width值無關(guān)
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）
dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線（常用）
solid :實(shí)線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據(jù)border-color的值畫3D凹槽
ridge :根據(jù)border-color的值畫菱形邊框
inset : 根據(jù)border-color的值畫3D凹邊
outset : 根據(jù)border-color的值畫3D凸邊
ss的標(biāo)簽有很多，本篇文章為大家總結(jié)以下常用的一些標(biāo)簽以及簡單說明這些標(biāo)簽的作用。
文字顏色： color: #ffffff;
文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
字體大小：font-size:16px;
文字行高： line-height: 30px;
文字粗細(xì)： font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)
文字修飾： text-decoration:line-through; (加刪除線)overline;(加頂線)underline;(加下劃線)none;(無修飾線)
對(duì)齊方式： text-align:right; (文字右對(duì)齊)left;(文字左對(duì)齊)center;(內(nèi)部元素居中)justify;(文字分散對(duì)齊)
使用練習(xí)：我們隨機(jī)書寫一段文字，設(shè)置文字的顏色為紅色，字體樣式為斜體，字體大小為20px，行高為35px，字體加粗，加下劃線，并是文字居中對(duì)齊；那么我們的代碼就如下所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
背景樣式：background:#f00; (紅色背景)background-image : url(/image/bg.gif); (背景圖片)background-repeat : repeat;(重復(fù)排列-網(wǎng)頁默認(rèn))background-repeat : no-repeat;(不重復(fù)排列)background-repeat : repeat-x; (在x軸重復(fù)排列)background-repeat : repeat-y; (在y軸重復(fù)排列)
邊框樣式：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(實(shí)線框)dotted(虛線框)double(雙線框)groove(立體內(nèi)凸框)ridge(立體浮雕框)inset(凹框)outset(凸框)
內(nèi)邊距樣式：padding-top:10px; (上邊框留空白)padding-right:10px;(右邊框留空白)padding-bottom:10px; (下邊框留空白)padding-left:10px;(左邊框留空白)
也可以簡寫成padding:10px 10px 10px 10px;(分別對(duì)應(yīng)上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)
外邊距樣式：margin-top:10px; (上邊界留空白)margin-right:10px;(右邊界留空白)margin-bottom:10px; (下邊界留空白)margin-left:10px;(左邊界留空白)
也可以簡寫成margin:10px 10px 10px 10px;(分別對(duì)應(yīng)上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)
使用練習(xí)：我們隨機(jī)書寫一段文字，設(shè)置文字的背景為灰色，邊框?yàn)榧t色 2px 實(shí)線框，內(nèi)邊距為10px，外邊距為10px；那么我們的代碼就如下所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
對(duì)于css的常用標(biāo)簽今天就先介紹到這里，大家在平時(shí)可以自己多加練習(xí)練習(xí)，熟練一下各個(gè)標(biāo)簽的作用。
每日金句：有時(shí)候死扛下去總是會(huì)有機(jī)會(huì)的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
