CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架
2064CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架
查看全文全站搜索 客戶案例 新聞中心 未分類
CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。
CSS邊框 border
1.設(shè)置邊框樣式:
border-style:樣式;
可選的樣式有:none 無邊框 ,dotted 虛線邊框 ,dashed 虛線邊框 ,solid 實線邊框 ,double 雙邊框 ,groove 凹槽邊框, ridge 壟狀邊框 ,inset 嵌入邊框 ,outset 外凸邊框 ,hidden 隱藏邊框
border-top-style:none; 上邊框樣式
border-bottom-style:solid; 下邊框樣式
border-left-style: dashed; 左邊框樣式
border-right-style:double; 右邊框樣式
border-style:dotted solid dashed double; (上右下左邊框)
2.設(shè)置邊框?qū)挾龋?/strong>
邊框?qū)挾炔荒軉为?dú)設(shè)置,必須在設(shè)置了邊框樣式后寬度才會生效
border-width:1px; 寬度為1像素的邊框
border-top-width:15px; 上邊框15像素
border-bottom-width:15px; 下邊框
border-left-width:15px; 左邊框
border-right-width:15px; 右邊框
CSS輪廓 outline
outline(輪廓)是繪制于元素周圍的一條線,位于邊框邊緣外圍,可以起到突出元素的作用 可以設(shè)置的屬性有 顏色 樣式 寬度
1、輪廓顏色
outline-color:red;
2.輪廓樣式
outline-style:樣式值;
樣式值參考如下:
none 默認(rèn)。定義無輪廓。
dotted 定義點(diǎn)狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓。雙線的寬度等同于 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。
3、輪廓寬度:
outline-width:寬度值;
可能出現(xiàn)的寬度值參考如下;
thin 規(guī)定細(xì)輪廓。
medium 默認(rèn)。規(guī)定中等的輪廓。
thick 規(guī)定粗的輪廓。
length 允許您規(guī)定輪廓粗細(xì)的值。
CSS外邊距 margin
1、什么是外邊距
外邊距控制塊級元素之間的距離,他們是透明不可見的,包括margin-top, margin-right, margin-bottom, margin-left
2.外邊距的寫法
(1)margin: 40px 30px 20px 10px; 上右下左
(2)margin:30px 40px 20px; 上 左右 下
(3)margin:30px 40px; 上下 左右
(4)margin:40px; 上下左右
3.可能的值
(1)length 規(guī)定具體單位記的外邊距長度
(2)% 基于父元素的寬度的外邊距的長度
(3)auto 瀏覽器計算外邊距
四、CSS內(nèi)邊距padding
1.什么是內(nèi)邊距
控制塊級元素內(nèi)部content和border之間的距離
2、常用寫法
(1)padding: 40px 30px 20px 10px; 上右下左
(2)padding:30px 40px 20px; 上 左右 下
(3)padding:30px 40px; 上下 左右
(4)padding:40px; 上下左右
3.可能取的值
(1)length 規(guī)定具體單位記的外邊距長度
(2)% 基于父元素的寬度的外邊距的長度
(3)auto 瀏覽器計算外邊距
CSS邊框樣式:CSS3(border-image-*)邊框圖片效果CSS3提供了一個新的屬性集合,用這幾個屬性可以嵌入圖片形式的邊框。這樣,邊框就可以自定義了。
查看全文客官請稍后,玩命加載中!