輕松學：網頁設計10-網頁美化CSS 邊框和背景

時間：2023-09-29 00:06:01 | 來源：網站運營

時間：2023-09-29 00:06:01 來源：網站運營

輕松學：網頁設計10-網頁美化CSS 邊框和背景：邊框與背景設置

1.邊框設置

為了分割頁面中不同的元素，常常需要給元素設置邊框與背景效果。網頁能通過邊框與背景圖像給讀者留下更深刻的印象，所以在網頁設計中，合理控制背景顏色和背景圖像至關重要。

為了分割頁面中不同的盒子，常常需要給元素設置邊框效果。

border-width綜合屬性:常用取值單位為像素。在設置邊框寬度時，必須同時設置邊框樣式，如果未設置樣式或設置為none，則不論寬度設置為多少都無效。

在網頁設計中，有時需要對區(qū)域整體添加一個圖片邊框，運用CSS3中的

border-image屬性：可以輕松實現這個效果。

基本語法格式

border-image:border-image-source border-image-slice/ border-image-width/ border-image-outset border-image-repeat;

圓角邊框（border-radius）是CSS3新增屬性。

基本語法格式：border-radius:參數1/參數2

“參數1”表示圓角的水平半徑，“參數2”表示圓角的垂直半徑，兩個參數之間用“/”隔開。

box-shadow屬性：也可以改變陰影的投射方向以及添加多重陰影效果。

基本語法格式：box-shadow:像素值1像素值2像素值3像素值4 顏色值 陰影類型;

像素值1：表示元素水平陰影位置，可以為負值（必選屬性）；像素值2表示元素垂直陰影位置，可以為負值（必選屬性）；像素值3表示陰影模糊半徑（可選屬性）;像素值4表示陰影擴展半徑，不能為負值（可選屬性）；顏色值表示陰影顏色，為可選屬性；陰影類型表示內陰影（inset）/外陰影（默認），為可選屬性）。

2.背景的設置：

background-color屬性：設置網頁元素的背景顏色，其屬性值與文本顏色的取值一樣，background-color的默認值為transparent，即背景透明，此時子元素會顯示其父元素的背景。

基本語法格式：background-color:背景顏色屬性值

opacity屬性：能夠使任何元素呈現出透明效果，透明度值在0~1之間

opacity：opacityValue; 在CSS3中，使用opacity屬性能夠使任何元素呈現出透明效果

可以將圖像作為網頁元素的背景，通過background-image屬性實現。

基本語法格式：background-image :url(圖像文件路徑);

body{background-color:#CCC; background-image:url(images/jianbian.jpg);} background-repeat屬性控制背景圖像水平和豎直兩個方向平鋪

background-position屬性控制背景圖像位置的值通常有兩個，中間用空格隔開，水平和垂直方向的坐標。

background-attachment屬性來設置背景圖像固定。

background-size屬性可以設置背景圖像的高度和寬度。 background-size:屬性值1 屬性值2;

background-origin屬性可以自行定義背景圖像的相對位置。

在上面的語法格式中，background-origin屬性有三種取值，分別表示不同的含義，具體解釋如下。

padding-box：背景圖像相對于內邊距區(qū)域來定位。

border-box：背景圖像相對于邊框來定位。

content-box：背景圖像相對于內容框來定位。

background-clip屬性用于定義背景圖像的裁剪區(qū)域

在語法格式上，background-clip屬性和background-origin 屬性的取值相似，但含義不同，具體解釋如下。

border-box：默認值，從邊框區(qū)域向外裁剪背景。

padding-box：從內邊距區(qū)域向外裁剪背景。

content-box：從內容區(qū)域向外裁剪背景。

background-image、background-repeat、background-position和background-size等屬性提供多個屬性值可以實現多重背景圖像效果，各屬性值之間用逗號隔開。background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);

背景屬性也是一個復合屬性，可以將背景相關的樣式都綜合定義在一個復合屬性background中。

background:

[background-color]

[background-image]

[background-repeat]

[background-attachment]

[background-position]

[background-size]

[background-clip]

[background-origin];

通過引入RGBA模式和opacity屬性，對背景與圖片設置不透明度，opacity：opacityValue;

opacity屬性用于定義標簽的不透明度，參數opacityValue表示不透明度的值，它是一個介于0~1之間的浮點數值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。