CSS學習(三) css邊框樣式(上)

2021-07-10 05:22:56 字數 867 閱讀 8909

一、理論:

1.css邊框簡介

a.border-width 設定粗細

b.border-color 設定顏色

c.border-style 設定型別

d.以上都遵守trbl原則,例:border-top-style

2.邊框的型別

a.none 無邊框

b.hidden 無邊框,但對於表而言是解決邊框衝突

c.dotted 點狀邊框

d.dashed 虛線邊框

e.solid 實線邊框

f.double 雙線邊框

g.groove 凹槽邊框

h.ridge 壟狀邊框

i.inset 3d inset邊框

j.outset 3d outset邊框

k.inherit 從父元素繼承邊框樣式,但只有某些瀏覽器支援此屬性

3.不同瀏覽器字首:

a.-moz- firefox

b.-o- opera

c.-khtml-  konqueror

d.-ms- internet explorer

e.外掛程式-prefix-free 可略去瀏覽器字首

4.border-image屬性語法及引數:

a.none 無背景

b.image 背景

c.表示方位

d.設定邊框背景大小(百分比)

e.stretch\repeat\round 拉伸\重複\平鋪邊框背景

二、實踐:1.

2.

CSS 邊框樣式

簡寫 border color width style 所有的簡寫,一經使用,所有省略的值都會採用預設值 屬性 color,width,style border 方向 屬性 簡寫 border 方向 color width style 四邊圓角 border radius px 或 單邊圓角 bor...

CSS邊框樣式

圓角邊框 border top left radius 40px 左上角 border bottom left radius 40px 左下角 border top right radius 20px 右上角 border bottom right radius 10px 右下角 border bo...

CSS 邊框樣式

本節我們來學習邊框樣式,主要包括如何設定邊框的寬度 邊框的顏色 邊框的樣式等。當我們給某個元素設定邊框時,可以分為上下左右四個邊框,既可以同時設定四個邊框的樣式,也可以分開設定四個邊框的樣式。關於邊框樣式的四個屬性 屬性描述 border width 設定邊框的寬度 border style 設定邊...