區域性邊框的使用 CSS入門基礎(012)

2021-10-12 09:57:49 字數 1510 閱讀 1650

今天我們接著分享邊框樣式的使用。

我們都知道邊框有上下左右,四條邊,那麼如果我們要對其中的某一條邊設定,我該怎麼辦?

在css中,我們是可以分別對上下左右的邊進行單獨的樣式設定的。

上邊框border-top:

border-top-width:1px;border-top-style:solid;border-top-color:red;
簡潔寫法:

border-top: 1px solid red;
下邊框border-bottom:

border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: blue;
簡潔寫法:

border-bottom: 1px solid blue;
左邊框border-left:

border-left-width: 1px;border-left-style: solid;border-left-color: green;
簡潔寫法:

border-left: 1px solid green;
右邊框border-right:

border-right-width: 1px;border-right-style: solid;border-right-color: orange;
簡潔寫法:

border-right: 1px solid orange;
以上內容,無論是邊框的整體樣式,還是區域性樣式,都是需要設定邊框的三個屬性的,即寬度、外觀和顏色。

border-top

border-left

border-right

border-bottom

示例**:

這裡給大家一種特殊的小技巧,請看**

上面的**,是設定了整體邊框,然後對其中一邊將寬度設定為0畫素,邊框沒有寬度了,也就不顯示了。從這裡可以看出來,css樣式**真的是層疊樣式,最後設定的效果一定會覆蓋前面的效果。這一點尤其需要好好理解。

邊框樣式的使用 CSS入門基礎(011)

今天我們說說邊框樣式的內容。在網頁中,任何塊元素和行內元素都可以設定邊框屬性。像div img table span都可以設定邊框屬性的。設定邊框一般有三個方面,一是邊框的寬度,二是邊框的外觀,三是邊框的顏色。語法 border width 畫素值 border style 屬性值 border c...

css基礎入門文字 背景和邊框屬性

1 font size 10px 文字大小 2 color 文字顏色 3 font family 微軟雅黑 文字字型 4 line height 行高 1 background color 背景顏色 2 background repeat no repeat repeat x repeat y 背景...

css 基礎入門 border 邊框三角形

習慣養成 用ps測量寬高時 不包含border 1,border 邊框 border 1px solid 000 粗細 樣式 顏色 頁面自動設定 border top color green border top style solid border top width 1px border rig...