CSS邊框和背景

2021-08-07 10:54:21 字數 1256 閱讀 9988

1、邊框線條樣式

none //沒有邊框

dashed //破折線邊框

dotted //圓點線邊框

double //雙線邊框

groove //槽線邊框

inset //使元素內容具有內嵌效果的邊框

outset //使元素內容具有外凸效果的邊框

ridge //脊線邊框

solid //實線邊框

2、圓角邊框樣式

border-radius//四條邊角(左上、右上、右下、左下)

border-top-left-radius//左上角

border-top-right-radius//右上角

border-bottom-left-radius//左下角

border-bottom-right-radius//右下角

3、設定背景樣式

1)background-color//背景顏色

transparent//設定背景顏色為透明色

2)background-image//背景

3)background-repeat//背景樣式,其值有:

repeat-x //水平方向平鋪影象

repeat-y //垂直方向平鋪影象

repeat //水平和垂直方向同時平鋪影象

no-repeat //禁止平鋪影象

4)background-size//背景影象的尺寸大小

auto //預設值

cover //等比例縮放影象,使影象至少覆蓋容器

contain //等比例縮放影象,使其寬度,高度中較大者與容易橫向或縱向重合

5)background-position//背景影象的位置

6)background-attachment//背景的滾動

scroll //預設值,背景固定在元素上,不會隨著內容一起滾動

fixed //背景固定在視窗上,內容滾動時背景不動

7)background-clip//背景的剪裁

border-box //在元素盒子內部剪裁背景

padding-box//在內邊距盒子內部剪裁背景

content-box//在內容盒子內部剪裁背景

8)background-origin//背景起始點

border-box //在元素盒子內部繪製背景

padding-box//在內邊距盒子內部繪製背景

content-box//在內容盒子內部繪製背景

9)background//背景簡寫方式

css背景 邊框

border style dotted 邊框線虛線 border width 6px 邊框線的寬度 background repeat no repeat 不重複 填充背景必須要加上高度跟寬度 不然不顯示 background repeat repeat x 水平方向填充 background re...

CSS 背景 邊框

單個屬性 background color 背景顏色 background image 背景位址 background repeat 是否平鋪 background position 背景位置 background attachment 背景固定還是滾動 背景的合寫 符合屬性 background ...

CSS3 邊框和背景

下述內容主要講述了 html5權威指南 第19章關於 使用邊框和背景 css3中邊框和樣式得到了增強。例如 可以建立圓角邊框,使用影象邊框,為元素建立陰影。表 基本邊框屬性屬性 說明值border width 設定邊框的寬度 長度值 百分數 thin medium thick border styl...