css重要標(biāo)簽總結(jié)

一、css背景標(biāo)簽

1，設(shè)置背景顏色

back-ground-color 屬性指定元素的背景色。
小實(shí)例如下圖所示：

運(yùn)行結(jié)果如下：

可以通過選擇器給不同的標(biāo)簽設(shè)置不同的顏色，在這里h1,div,和p標(biāo)簽將擁有不同的背景色：
實(shí)例：
運(yùn)行結(jié)果如下圖所示：

2.設(shè)置背景圖像

background-image屬性指定用作元素背景的圖像。默認(rèn)情況下，圖像會(huì)重復(fù)，以覆蓋整個(gè)元素。用url來引入外部圖片。
具體實(shí)例如下所示：
運(yùn)行結(jié)果如下圖：
注意事項(xiàng)：使用背景圖片時(shí)，要注意背景圖片的樣式，不要有干擾到文本的圖像，以免影響效果。

css背景重復(fù)的問題
默認(rèn)情況下，background-repeat屬性在垂直和水平方向上都重復(fù)圖像。某些圖像應(yīng)只適合水平或垂直方向上重復(fù)，若想僅在水平方向上重復(fù)，需要用（background-repeat：repeat-x；），則背景看起來更好；若想要僅在垂直重復(fù)圖像，需設(shè)置background-repeat：repeat-y；
屬性還可以指定只顯示一次背景圖像：用background-repeat：no-repeat標(biāo)簽即可。

4、指定背景圖像的位置

指定背景圖像的位置需要使用background-position標(biāo)簽
具體實(shí)例如下圖所示：
下面將會(huì)展示把背景圖片放在右上角的代碼：
運(yùn)行結(jié)果如下圖所示：

5、設(shè)置背景圖像固定

background-attachment 屬性來設(shè)置背景圖像固定，其屬性值scroll圖像隨頁面元素一起滾動(dòng)（默認(rèn)值），fixed圖像固定在屏幕上，不隨頁面元素滾動(dòng)。

6、設(shè)置背景圖像大小

background-size 屬性可以設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果設(shè)一個(gè)值，則第二個(gè)值會(huì)默認(rèn)auto。其格式如下所示：
background-size：屬性1 屬性2；
實(shí)例如下：

運(yùn)行結(jié)果如下：

7、設(shè)置圖像透明效果

使用opacity屬性能夠使任何元素能夠使任何元素呈現(xiàn)出透明效果，透明度在0~1之間，其格式如下：
opacity：opacityValue；

二、css邊框標(biāo)簽

1.設(shè)置邊框顏色

（1）設(shè)置邊框樣式（border-style）
邊框樣式用于定義邊框的風(fēng)格，常用屬性值如下：
none： 沒有邊框即忽略所有邊框的寬度（默認(rèn)值）。
solid：邊框?yàn)閱螌?shí)線。
dashed：邊框?yàn)樘摼€。
dotted: 邊框?yàn)辄c(diǎn)線。
double：邊框?yàn)殡p實(shí)線。
既可以對(duì)盒子的單邊進(jìn)行設(shè)置，也可以綜合設(shè)置四條邊的樣式。使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按照上右下左的順時(shí)針順序；省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四條邊；兩個(gè)值為上下/左右；三個(gè)值為上/左右/下。
border-top-style： 上邊框樣式
border-right-style：右邊框樣式。
borer-bottom-style：下邊框樣式。
border-left-style：下邊框樣式。
border-style：上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式
border-style： 上邊框樣式 左右邊框樣式 下邊框樣式。
border-style：上下邊框樣式 左右邊框樣式。
border-style：上下左右邊框樣式。
（2)設(shè)置邊框?qū)挾?#xff08;border-width）
border-width 屬性用于設(shè)置邊框的寬度，其格式如下
border-width：上邊[右邊 下邊 左邊];
在上面的語法格式中，border-with 屬性常用取值單位像素px。并且同樣遵循值復(fù)制的原則，其屬性值可以設(shè)置1~4個(gè)，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下，四個(gè)值為上/右/下/左。具體如下：
border-top-width： 上邊框?qū)挾?br /> border-right-width：右邊框?qū)挾取?br /> borer-bottom-width：下邊框?qū)挾取?br /> border-left-width：下邊框?qū)挾取?br /> border-width：上邊框?qū)挾?右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾?br /> border-width： 上邊框?qū)挾?左右邊框?qū)挾?下邊框?qū)挾取?br /> border-width：上下邊框?qū)挾?左右邊框?qū)挾取?br /> border-width：上下左右邊框?qū)挾取?br /> （3）設(shè)置邊框顏色（border-color）
border-color屬性用于設(shè)置邊框顏色，其格式如下：
border-color：上邊[右邊 下邊 左邊];
設(shè)置邊框樣式的同時(shí)必須設(shè)置邊框樣式，如果未設(shè)置樣式或者設(shè)置為none，則其他的邊框?qū)傩詿o效。邊框顏色的單邊與綜合設(shè)置，順時(shí)針順序，與上面的寬度和樣式屬性的設(shè)置規(guī)則相同，在這里就不一一描述了。
（4）綜合設(shè)置邊框
border-top：上邊框?qū)挾?樣式 顏色。
border-reight：右邊框?qū)挾?樣式 顏色
border-bottom：下邊框?qū)挾?樣式 顏色
border- left：左邊框?qū)挾?樣式 顏色
border：四邊寬度 樣式 顏色
（5）圓角邊框
border-radius屬性用于向元素添加圓角邊框：
其語法格式如下圖所示：
border-radius：參數(shù)1/參數(shù)2
其中“參數(shù)1”表示圓角的水平半徑，“參數(shù)2”表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開。需要注意的是，在使用border-raidius屬性時(shí)，如果第二個(gè)參數(shù)省略，則會(huì)默認(rèn)等于第一個(gè)參數(shù)。通過border-radius設(shè)置邊框圓角。

總結(jié)

以上是生活随笔為你收集整理的css背景和边框标签总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。