Web基础05 盒子模型01边框属性
生活随笔
收集整理的這篇文章主要介紹了
Web基础05 盒子模型01边框属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先要知道盒子模型用的標(biāo)簽是
必備的是實(shí)體化三屬性 width height background(背景屬性)
邊框?qū)傩?
①邊框樣式(border-style)
border-style:上邊[左邊 下邊 右邊];
樣式:double 雙實(shí)線 dashed 虛線 solid 單實(shí)線 dotted 點(diǎn)線
②邊框?qū)挾?#xff08;border-width)
border-width:上邊[左邊 下邊 右邊];
單位px
要先有樣式 才可以有寬度
③邊框顏色(border-color)
border-color:上邊[左邊 下邊 右邊];
border-top/right/bottom/left-color;
④綜合設(shè)置邊框
border:樣式 寬度 顏色;
不分先后,省略的用默認(rèn)值
border-top/right/bottom/left:樣式 寬度 顏色;單側(cè)邊綜合屬性
⑤圓角邊框(border-radius)
border-radius:水平1 水平2 水平3 水平4/垂直1 垂直2 垂直3 垂直4;
參數(shù)取值單位:px或%
⑥圖片邊框(border-image)
border-image:border-image-source/border-image-slice/border-image-width/border-image-outset/border-image-repeat;
border-image-source 指定圖片路徑
border-image-slice 指定邊框圖像頂、右、底、左的偏移量
border-image-width指定邊框?qū)挾?
border-image-outset 指定邊框背景的盒子外部延伸距離
border-image-repeat 指定背景圖片的平鋪方式
border-image-repeat:stretch 拉伸填充
總結(jié)
以上是生活随笔為你收集整理的Web基础05 盒子模型01边框属性的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 花费巨资参加SAP培训真的有用吗?
- 下一篇: ppt flash倒计时器_央视都在分享