,,

CSS 21天入門：邊框

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月18日 22:37 本文熱度 780

邊框樣式，即可以為元素指定邊框。看起來似乎很簡(jiǎn)單。

來看看示例：

這些都是使用 CSS 實(shí)現(xiàn)的，是不是有點(diǎn)子強(qiáng)大？

邊框位置(top, right, bottom, left)

當(dāng)我們談?wù)摓樵刂付ㄟ吙驎r(shí)，我們說的是上下左右四個(gè)邊框線。

但是在 CSS 里，我們不按這樣的順序來說，而是會(huì)說上，右，下，左。

聰明的你一定想到了，這是順時(shí)針的順序。

沒錯(cuò)，當(dāng)我們?cè)跒檫吙蛑付邮綍r(shí)，以及后面為元素的位置指定外邊距或內(nèi)邊距時(shí)，都是按這個(gè)順序來簡(jiǎn)寫。

如果不想記這個(gè)順序，有沒有辦法指定呢？

答案是有，因?yàn)?CSS 里的屬性分解有 top, right, bottom, left 的組合。之所以讓記住順序，是為了簡(jiǎn)寫。

邊框?qū)挾?border-width)

邊框可以指定寬度，使用 px，也就是像素，可以指定任意寬度的邊框。

.one {   border-width: 1px; } .two {   border-width: 1px 2px 3px 4px; }

這里類 one 指定了四個(gè)邊框的寬度都為 1px，而類 two 則為四個(gè)邊框指定了不同的寬度，近上述順序說的，你理解了 1234 分別是哪個(gè)邊框的寬度了嗎？

如果記不住，那上面的代碼和下面等同：

.two {   border-top-width: 1px;   border-right-width: 2px;   border-bottom-width: 3px;   border-left-width: 4px; }

對(duì)比下來，是不是前面的書寫更簡(jiǎn)單？

邊框顏色(border-color)

邊框顏色和前景色，背景色一樣，都是通過顏色值改變邊框顏色。

這里只要注意，border-color 用于指定四個(gè)邊框的顏色，順序還是按順時(shí)針的順序，如果想單獨(dú)指定，則使用四個(gè)單獨(dú)的屬性：

border-top-color
border-right-color
border-bottom-color
border-left-color

效果是一樣的。

邊框樣式(border-style)

邊框樣式，指定邊框是實(shí)線，虛線，還是其它各種樣式。

這里有預(yù)先定義好的一些值，如下：

none：無邊框。
hidden：與 "none" 相同。不過應(yīng)用于表格時(shí)除外，對(duì)于表格，hidden 用于解決邊框沖突。
dotted：點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
dashed：虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
solid：實(shí)線。
double：雙實(shí)線。雙線的寬度等于 border-width 的值。
groove：3D 凹槽邊框。其效果取決于 border-color 的值。
ridge：3D 壟狀邊框。其效果取決于 border-color 的值。
inset：3D inset 邊框。其效果取決于 border-color 的值。
outset：3D outset 邊框。其效果取決于 border-color 的值。

展示效果如下：

圓角屬性 (border-radius)

在 CSS3 未引入圓角樣式之前，要實(shí)現(xiàn)圓角效果非常復(fù)雜。

CSS3 中引入的圓角屬性，大大簡(jiǎn)化了這一實(shí)現(xiàn)。

border-radius 屬性指定的是四個(gè)角的半徑，半徑的值可以是一個(gè)，即原型的圓角；也可以是兩個(gè)，即橢圓形的圓角。

它的順序和邊框類似，從左上角開始，順時(shí)針。

border-radius: 1em/5em;  /* 和下面的效果一樣 */  border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em;

注意這四個(gè)分開的屬性是以 top 和 bottom 開始，這是固定屬性定義。

相信你已經(jīng)明了在本章最初實(shí)現(xiàn)的那個(gè)圖形，有些用到了圓角屬性。

最初示例的代碼

最初的示例代碼里，是簡(jiǎn)單組合了邊框的樣式，示意代碼如下：

.normal {   border: 1px solid black; }  .sample1 {   border-width: 0 0 0 10px;   border-color: green;   border-style: solid; }  .sample2 {   border-width: 2px;   border-radius: 1.2em;   border-color: green;   border-style: solid; }  .sample3 {   border-width: 10px 0 0 0;   border-radius: 0.5em 0.5em 0.2em 0.2em;   border-color: green;   border-style: solid; }  .sample4 {   border-width: 1px;   border-radius: 0.8em 0 0.8em 0;   border-color: green;   border-style: dashed; }