亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

來(lái)看看示例：

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

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

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

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

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

沒錯(cuò)，當(dāng)我們?cè)跒檫吙蛑付邮綍r(shí)，以及后面為元素的位置指定外邊距或內(nèi)邊距時(shí)，都是按這個(gè)順序來(lái)簡(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è)邊框指定了不同的寬度，近上述順序說(shuō)的，你理解了 1234 分別是哪個(gè)邊框的寬度了嗎？

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

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

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

邊框顏色(border-color)

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

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

• border-top-color

• border-right-color

• border-bottom-color

• border-left-color

效果是一樣的。

邊框樣式(border-style)

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

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

• none：無(wú)邊框。

• hidden：與 "none" 相同。不過(guò)應(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; } 

通過(guò)為元素的四個(gè)不同邊框指定不同樣式，能創(chuàng)造出很多意想不到的圖形和風(fēng)格，滿足各種需求，這需要大家充分發(fā)揮相像力去實(shí)現(xiàn)！

總結(jié)

• ?? 邊框樣式分成寬度，顏色和樣式，分別是 border-width, border-color 和 border-style。

• ?? 邊框樣式簡(jiǎn)寫時(shí)，順序是 top, right, bottom 和 left，即按順時(shí)針順序。

• ?? 邊框的圓角屬性為元素的四個(gè)角度指定圓角的半徑，可以是圓的半徑，也可以是橢圓的半徑。