任務(wù)二-盒子邊框設(shè)置

信息工程系教師：宇虹儒項目五DIV+CSS創(chuàng)建網(wǎng)頁相關(guān)知識邊框?qū)傩越榻B

border-styleborder-widthborder-color4123

border-radius6

border5

border-image7一

邊框?qū)傩詾榱朔指铐撁嬷胁煌暮凶樱３Ｐ枰o元素設(shè)置邊框效果。設(shè)置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊

下邊

左邊];none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線邊框?qū)挾萣order-width:上邊[右邊

下邊

左邊];像素值邊框顏色border-color:上邊[右邊

下邊

左邊];顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設(shè)置邊框border:四邊寬度

四邊樣式

四邊顏色;

圓角邊框border-radius:水平半徑參數(shù)/垂直半徑參數(shù);像素值或百分比圖片邊框border-images:圖片路徑

裁切方式/邊框?qū)挾?邊框擴展距離

重復(fù)方式;

CSS邊框?qū)傩詎one：沒有邊框solid：邊框為單實線dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實線*/

border-style:soliddotted;/*上下實線、左右點線*/border-style:soliddotteddashed;/*上實線、左右點線、下虛線*/二border-style邊框?qū)傩?.2.1CSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值在設(shè)置邊框?qū)挾葧r，必須同時設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論寬度設(shè)置為多少都無效。注意：常用取值單位為像素。三border-widthCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值border-width:5px;/*四邊寬度均為5像素*/border-width:5px3px;/*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px3px4px;/*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性三borer-widthCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)實際工作中最常用#十六進制色值，例：#ccc四border-colorCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍色*/border-color:#f00#00f#0f0;/*上紅色、左右藍色、下綠色*/border-color綜合屬性四border-colorCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值CSS3在原邊框顏色屬性（border-color）的基礎(chǔ)上派生了4個邊框顏色屬性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colors四border-colorCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值例如對段落文本<p>添加漸變邊框效果，示例代碼如下：p{ border-style:solid; border-width:10px; -moz-border-top-colors:#a0a#909#808#707#606#505#404#303; -moz-border-right-colors:#a0a#909#808#707#606#505#404#303; -moz-border-bottom-colors:#a0a#909#808#707#606#505#404#303; -moz-border-left-colors:#a0a#909#808#707#606#505#404#303;}四border-colorCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）border-top:上邊框?qū)挾?/p>

樣式

顏色;border-right:右邊框?qū)挾?/p>

樣式

顏色;border-bottom:下邊框?qū)挾?/p>

樣式

顏色;border-left:左邊框?qū)挾?/p>

樣式

顏色;border:四邊寬度

樣式

顏色;border:寬度,樣式,顏色注意：寬度、樣式、顏色順序任意，不分先后五borderCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圓角邊框?qū)傩允荂SS3新增屬性，其基本語法格式如下。border-radius:參數(shù)1/參數(shù)2六border-radiusCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）值得一提的是，border-radius屬性同樣遵循值復(fù)制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設(shè)置1-4個參數(shù)值，用來表示四角圓角半徑的大小。六border-radiusCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圖片邊框（border-image）在網(wǎng)頁設(shè)計中，有時需要對區(qū)域整體添加一個圖片邊框，運用CSS3中的border-image屬性可以輕松實現(xiàn)這個效果。border-image:border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat;七border-imageCSS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圖片邊框（border-image）屬性說明border-i