一文了解CSS3 新增背景屬性 + 新增邊框?qū)傩?/h1>
發(fā)布時間：2024-08-14 16:44:21 作者：秋刀魚不做夢 
我要評論
CSS3在CSS2的基礎上，新增了很多強大的新功能，從而解決一些實際面臨的問題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框?qū)傩?，感興趣的朋友一起看看吧
前言：CSS3在CSS2的基礎上，新增了很多強大的新功能，從而解決一些實際面臨的問題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框?qū)傩浴?/p>
先讓我們看一下本篇文章的大致內(nèi)容：
1.CSS3 新增背景屬性
先讓我們來看一下有哪些新增的屬性：
接下來我們一一進行講解：
（1）background-origin
background-origin屬性作用：用于設置背景圖的原點。
常見屬性值：
1. padding-box ：從padding 區(qū)域開始顯示背景圖像。—— 默認值
2. border-box ： 從border 區(qū)域開始顯示背景圖像。
3. content-box ： 從content 區(qū)域開始顯示背景圖像。
我們從常見屬性值中我們就可以發(fā)現(xiàn)，padding-box是background-origin的默認值，也就是說背景圖片是從padding區(qū)域開始顯示背景圖像的（例如）：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="outer"> </div>
</body>
</html>
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
其中藍色陰影區(qū)為內(nèi)容區(qū)，我們會發(fā)現(xiàn)背景的默認起始位置為盒子的padding區(qū)，這也應證了padding-box是background-origin的默認值。
接下來我們分別將background-origin的值改為border-box和content-box看一下效果：
border-box：
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
background-origin: border-box;
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
content-box：
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
background-origin: content-box;
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
我們會看到其不一樣的效果，這樣我們就大致的了解了background-origin屬性。
（2）background-clip
background-clip屬性的作用：用于設置背景圖的向外裁剪的區(qū)域。
常見屬性值：
1. border-box ： 從border 區(qū)域開始向外裁剪背景。 —— 默認值
2. padding-box ： 從padding 區(qū)域開始向外裁剪背景。
3. content-box ： 從content 區(qū)域開始向外裁剪背景。
細心的讀者在上文的例子中就可以發(fā)現(xiàn)，設置了背景后，如果背景圖片過大，其背景是從border區(qū)域開始向外裁剪背景的（例如）：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="outer"> </div>
</body>
</html>
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
}
和background-origin屬性類似，我們可以設置其背景的裁剪邊緣，是從border區(qū)域開始向外裁剪背景，還是從padding區(qū)域開始向外裁剪背景，還是從content區(qū)域開始向外裁剪背景。這里直接展示一下效果：
padding-box：
content-box：
這樣我們就大致的了解了background-clip屬性了。
（3）background-size
background-size屬性的作用：用于設置背景圖的尺寸。（以下是其設置背景圖的尺寸的四種方式）：
方式一：用長度值指定背景圖片大小，不允許負值。
background-size: 300px 200px;
方式二：用百分比指定背景圖片大小，不允許負值。
background-size: 100% 100%;
方式三：contain ： 將背景圖片等比縮放，使背景圖片的寬或高，與容器的寬或高相等，再將完整背景圖片包含在容器內(nèi)。
background-size: contain;
如圖：（設置為contain）：
注意：這種方式設置背景圖片大小可能會造成容器里部分區(qū)域沒有背景圖片。
方式四：cover ：將背景圖片等比縮放，直到完全覆蓋容器，圖片會盡可能全的顯示在元素上。
background-size: cover;
如圖：（設置為cover）：
注意：這種方式設置背景圖片大小可能會造成容器里部分區(qū)域沒有背景圖片。
這樣我們就大致的了解了background-size屬性了。
（4）backgorund 復合屬性
和其他的復合屬性一樣，backgorund 復合屬性就是將有關背景的一些屬性放到一個屬性里面來寫。但是我們要注意其里面的復合屬性的前后順序。
前后順序：
background: color url repeat position / size origin clip
注意：
1. origin 和 clip 的值如果一樣，如果只寫一個值，則origin 和 clip 都設置；如果設置了兩個值，前面的是origin ，后面的clip 。
2. size 的值必須寫在 position 值的后面，并且用 / 分開。
這樣我們就大致的了解了backgorund 復合屬性了。
補充：多背景圖
我們要知道，在CSS3中允許元素設置多個背景圖片，那么我們?nèi)绾谓o一個元素設置多個背景圖片呢？
我們直接使用案例來進行演示：
現(xiàn)在我們將剛才的背景圖片改為多背景圖：
div {
width: 300px;
height: 300px;
padding: 10px;
border: 10px dashed grey;
background: url(./image/bg-lt.png) no-repeat,
url(./image/bg-rt.png) no-repeat right top,
url(./image/bg-lb.png) no-repeat left bottom,
url(./image/bg-rb.png) no-repeat right bottom;
}
我們就會發(fā)現(xiàn)其背景圖片是由四個圖片組成的。
2.CSS3新增邊框?qū)傩?/h2>
對于CSS3新增邊框?qū)傩詠碚f，總共我們需要知道兩個，分別是：邊框圓角 和邊框外輪廓。
（1）邊框圓角
先讓我們看一下邊框圓角：
在 CSS3 中，使用border-radius屬性可以將盒子變?yōu)閳A角。例如：
同時設置四個角的圓角：
border-radius:30px;
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div></div>
</body>
</html>
CSS代碼：
div {
width: 300px;
height: 300px;
border-radius: 30px;
background-color: aquamarine;
}
當然我們還可以分開設置每個角的圓角：
屬性名 作用 border-top-left-radius 設置左上角圓角半徑：
1. 一個值是正圓半徑，
2. 兩個值分別是橢圓的x 半徑、y 半徑。 border-top-right-radius 設置右上角圓角半徑：
1. 一個值是正圓半徑，
2. 兩個值分別是橢圓的x 半徑、y 半徑。 border-bottom-right-radius 設置右下角圓角半徑：
1. 一個值是正圓半徑，
2. 兩個值分別是橢圓的x 半徑、y 半徑。 border-bottom-left-radius 設置左下角圓角半徑：
1. 一個值是正圓半徑，
2. 兩個值分別是橢圓的x 半徑、y 半徑。
這里我們以border-top-left-radius為例子：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./2024.5.18.css">
</head>
<body>
<div></div>
</body>
</html>
CSS代碼：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
/* 長軸長為30px，短軸長為10px */
border-top-left-radius: 30px 10px;
}
當然，邊框圓角還有復合屬性：（但是基本不會使用！）
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
這樣我們就大致了解了CSS3新增邊框?qū)傩粤恕?/strong>
（2）邊框外輪廓
先讓我們從效果上看一下什么是邊框外輪廓（如圖）：
其實邊框外輪廓和border很相似，但是其是在margin區(qū)外的一層邊框。
那了解了什么是邊框外輪廓之后，讓我們看一下其有哪些屬性：
1. outline-width ：外輪廓的寬度。
2. outline-color ：外輪廓的顏色。
3. outline-style ：外輪廓的風格。其屬性值有以下幾個：
（1）none ： 無輪廓
（2）dotted ： 點狀輪廓
（3）dashed ： 虛線輪廓
（4）solid ： 實線輪廓
（5）double ： 雙線輪廓
4. outline-offset 設置外輪廓與邊框的距離，正負值都可以設置。
當然，邊框外輪廓也有復合屬性，例如：
outline:50px solid blue;
我們會發(fā)現(xiàn)其屬性值和border幾乎一模一樣，是的，沒錯，設置邊框外輪廓就和設置border類似，只不過需要注意其位置就可以了。
這里我們只講解一下outline-offset ：
outline-offset 是用來設置外輪廓與邊框的距離，正負值都可以設置。
我們直接使用代碼來看一下：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./2024.5.18.css">
</head>
<body>
<div></div>
</body>
</html>
CSS代碼：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
outline: 5px dashed green;
}
但是我們給CSS代碼添加outline-offset 屬性之后：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
outline: 5px dashed green;
outline-offset: 9px;
}
這樣我們就大致的了解了邊框外輪廓屬性了。
到此這篇關于CSS3 新增背景屬性 + 新增邊框?qū)傩缘奈恼戮徒榻B到這了,更多相關CSS3 新增背景屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS3新增屬性：background-clip ，background-origin ， background-size，本文給大家分享CSS3新增的背景屬性，感興趣的朋友跟隨小編一起看看吧 2019-12-25 詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性
這篇文章主要介紹了詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性,既涵蓋了基礎的邊框?qū)挾扰c顏色設置又講到了CSS3中的圖片邊框及邊框漸變,需要的朋友可以參考下 2016-05-10 -
網(wǎng)頁制作Webjx文章簡介：這里討論的都是關于邊框?qū)傩詁order的極致應用，這些應用雖說有些劍走偏門，但在一些特殊的場合，可能還是會用得上的，如果你對HTML代碼有潔癖，有 2009-04-02
最新評論
我要評論前言：CSS3在CSS2的基礎上，新增了很多強大的新功能，從而解決一些實際面臨的問題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框?qū)傩浴?/p>
先讓我們看一下本篇文章的大致內(nèi)容：
1.CSS3 新增背景屬性
先讓我們來看一下有哪些新增的屬性：
接下來我們一一進行講解：
（1）background-origin
background-origin屬性作用：用于設置背景圖的原點。
常見屬性值：
1. padding-box ：從padding 區(qū)域開始顯示背景圖像。—— 默認值
2. border-box ： 從border 區(qū)域開始顯示背景圖像。
3. content-box ： 從content 區(qū)域開始顯示背景圖像。
我們從常見屬性值中我們就可以發(fā)現(xiàn)，padding-box是background-origin的默認值，也就是說背景圖片是從padding區(qū)域開始顯示背景圖像的（例如）：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="outer"> </div>
</body>
</html>CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
其中藍色陰影區(qū)為內(nèi)容區(qū)，我們會發(fā)現(xiàn)背景的默認起始位置為盒子的padding區(qū)，這也應證了padding-box是background-origin的默認值。
接下來我們分別將background-origin的值改為border-box和content-box看一下效果：
border-box：
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
background-origin: border-box;
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
content-box：
CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
background-origin: content-box;
/* 用于設置背景大小的，下文會進行講解，這里只看效果即可 */
background-size: cover;
}
我們會看到其不一樣的效果，這樣我們就大致的了解了background-origin屬性。
（2）background-clip
background-clip屬性的作用：用于設置背景圖的向外裁剪的區(qū)域。
常見屬性值：
1. border-box ： 從border 區(qū)域開始向外裁剪背景。 —— 默認值
2. padding-box ： 從padding 區(qū)域開始向外裁剪背景。
3. content-box ： 從content 區(qū)域開始向外裁剪背景。
細心的讀者在上文的例子中就可以發(fā)現(xiàn)，設置了背景后，如果背景圖片過大，其背景是從border區(qū)域開始向外裁剪背景的（例如）：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="outer"> </div>
</body>
</html>CSS代碼：
.outer {
width: 300px;
height: 300px;
border: 30px dashed grey;
padding: 30px;
background-image: url(./image/fish.jpg);
}
和background-origin屬性類似，我們可以設置其背景的裁剪邊緣，是從border區(qū)域開始向外裁剪背景，還是從padding區(qū)域開始向外裁剪背景，還是從content區(qū)域開始向外裁剪背景。這里直接展示一下效果：
padding-box：
content-box：
這樣我們就大致的了解了background-clip屬性了。
（3）background-size
background-size屬性的作用：用于設置背景圖的尺寸。（以下是其設置背景圖的尺寸的四種方式）：
方式一：用長度值指定背景圖片大小，不允許負值。
background-size: 300px 200px;
方式二：用百分比指定背景圖片大小，不允許負值。
background-size: 100% 100%;
方式三：contain ： 將背景圖片等比縮放，使背景圖片的寬或高，與容器的寬或高相等，再將完整背景圖片包含在容器內(nèi)。
background-size: contain;
如圖：（設置為contain）：
注意：這種方式設置背景圖片大小可能會造成容器里部分區(qū)域沒有背景圖片。
方式四：cover ：將背景圖片等比縮放，直到完全覆蓋容器，圖片會盡可能全的顯示在元素上。
background-size: cover;
如圖：（設置為cover）：
注意：這種方式設置背景圖片大小可能會造成容器里部分區(qū)域沒有背景圖片。
這樣我們就大致的了解了background-size屬性了。
（4）backgorund 復合屬性
和其他的復合屬性一樣，backgorund 復合屬性就是將有關背景的一些屬性放到一個屬性里面來寫。但是我們要注意其里面的復合屬性的前后順序。
前后順序：
background: color url repeat position / size origin clip
注意：
1. origin 和 clip 的值如果一樣，如果只寫一個值，則origin 和 clip 都設置；如果設置了兩個值，前面的是origin ，后面的clip 。
2. size 的值必須寫在 position 值的后面，并且用 / 分開。
這樣我們就大致的了解了backgorund 復合屬性了。
補充：多背景圖
我們要知道，在CSS3中允許元素設置多個背景圖片，那么我們?nèi)绾谓o一個元素設置多個背景圖片呢？
我們直接使用案例來進行演示：
現(xiàn)在我們將剛才的背景圖片改為多背景圖：
div {
width: 300px;
height: 300px;
padding: 10px;
border: 10px dashed grey;
background: url(./image/bg-lt.png) no-repeat,
url(./image/bg-rt.png) no-repeat right top,
url(./image/bg-lb.png) no-repeat left bottom,
url(./image/bg-rb.png) no-repeat right bottom;
}
我們就會發(fā)現(xiàn)其背景圖片是由四個圖片組成的。
2.CSS3新增邊框?qū)傩?/h2>
對于CSS3新增邊框?qū)傩詠碚f，總共我們需要知道兩個，分別是：邊框圓角 和邊框外輪廓。
（1）邊框圓角
先讓我們看一下邊框圓角：
在 CSS3 中，使用border-radius屬性可以將盒子變?yōu)閳A角。例如：
同時設置四個角的圓角：
border-radius:30px;
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div></div>
</body>
</html>CSS代碼：
div {
width: 300px;
height: 300px;
border-radius: 30px;
background-color: aquamarine;
}
當然我們還可以分開設置每個角的圓角：
| 屬性名 | 作用 |
|---|---|
| border-top-left-radius | 設置左上角圓角半徑： 1. 一個值是正圓半徑， 2. 兩個值分別是橢圓的x 半徑、y 半徑。 |
| border-top-right-radius | 設置右上角圓角半徑： 1. 一個值是正圓半徑， 2. 兩個值分別是橢圓的x 半徑、y 半徑。 |
| border-bottom-right-radius | 設置右下角圓角半徑： 1. 一個值是正圓半徑， 2. 兩個值分別是橢圓的x 半徑、y 半徑。 |
| border-bottom-left-radius | 設置左下角圓角半徑： 1. 一個值是正圓半徑， 2. 兩個值分別是橢圓的x 半徑、y 半徑。 |
這里我們以border-top-left-radius為例子：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./2024.5.18.css">
</head>
<body>
<div></div>
</body>
</html>CSS代碼：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
/* 長軸長為30px，短軸長為10px */
border-top-left-radius: 30px 10px;
}
當然，邊框圓角還有復合屬性：（但是基本不會使用！）
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
這樣我們就大致了解了CSS3新增邊框?qū)傩粤恕?/strong>
（2）邊框外輪廓
先讓我們從效果上看一下什么是邊框外輪廓（如圖）：
其實邊框外輪廓和border很相似，但是其是在margin區(qū)外的一層邊框。
那了解了什么是邊框外輪廓之后，讓我們看一下其有哪些屬性：
1. outline-width ：外輪廓的寬度。
2. outline-color ：外輪廓的顏色。
3. outline-style ：外輪廓的風格。其屬性值有以下幾個：
（1）none ： 無輪廓
（2）dotted ： 點狀輪廓
（3）dashed ： 虛線輪廓
（4）solid ： 實線輪廓
（5）double ： 雙線輪廓
4. outline-offset 設置外輪廓與邊框的距離，正負值都可以設置。
當然，邊框外輪廓也有復合屬性，例如：
outline:50px solid blue;
我們會發(fā)現(xiàn)其屬性值和border幾乎一模一樣，是的，沒錯，設置邊框外輪廓就和設置border類似，只不過需要注意其位置就可以了。
這里我們只講解一下outline-offset ：
outline-offset 是用來設置外輪廓與邊框的距離，正負值都可以設置。
我們直接使用代碼來看一下：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./2024.5.18.css">
</head>
<body>
<div></div>
</body>
</html>CSS代碼：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
outline: 5px dashed green;
}
但是我們給CSS代碼添加outline-offset 屬性之后：
div {
width: 200px;
height: 200px;
background-color: aquamarine;
outline: 5px dashed green;
outline-offset: 9px;
}
這樣我們就大致的了解了邊框外輪廓屬性了。
到此這篇關于CSS3 新增背景屬性 + 新增邊框?qū)傩缘奈恼戮徒榻B到這了,更多相關CSS3 新增背景屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- CSS3新增屬性：background-clip ，background-origin ， background-size，本文給大家分享CSS3新增的背景屬性，感興趣的朋友跟隨小編一起看看吧2019-12-25
詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性
這篇文章主要介紹了詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性,既涵蓋了基礎的邊框?qū)挾扰c顏色設置又講到了CSS3中的圖片邊框及邊框漸變,需要的朋友可以參考下2016-05-10- 網(wǎng)頁制作Webjx文章簡介：這里討論的都是關于邊框?qū)傩詁order的極致應用，這些應用雖說有些劍走偏門，但在一些特殊的場合，可能還是會用得上的，如果你對HTML代碼有潔癖，有2009-04-02
