欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文了解CSS3 新增背景屬性 + 新增邊框?qū)傩?/h1>
  發(fā)布時(shí)間：2024-08-14 16:44:21   作者：秋刀魚(yú)不做夢(mèng)   我要評(píng)論
CSS3在CSS2的基礎(chǔ)上，新增了很多強(qiáng)大的新功能，從而解決一些實(shí)際面臨的問(wèn)題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框?qū)傩裕信d趣的朋友一起看看吧

前言：CSS3在CSS2的基礎(chǔ)上，新增了很多強(qiáng)大的新功能，從而解決一些實(shí)際面臨的問(wèn)題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框?qū)傩浴?/p>

先讓我們看一下本篇文章的大致內(nèi)容：

1.CSS3 新增背景屬性

先讓我們來(lái)看一下有哪些新增的屬性：

接下來(lái)我們一一進(jìn)行講解：

（1）background-origin

background-origin屬性作用：用于設(shè)置背景圖的原點(diǎn)。

常見(jiàn)屬性值：

1. padding-box ：從padding 區(qū)域開(kāi)始顯示背景圖像。—— 默認(rèn)值
2. border-box ： 從border 區(qū)域開(kāi)始顯示背景圖像。
3. content-box ： 從content 區(qū)域開(kāi)始顯示背景圖像。

我們從常見(jiàn)屬性值中我們就可以發(fā)現(xiàn)，padding-box是background-origin的默認(rèn)值，也就是說(shuō)背景圖片是從padding區(qū)域開(kāi)始顯示背景圖像的（例如）：

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);
    /* 用于設(shè)置背景大小的，下文會(huì)進(jìn)行講解，這里只看效果即可 */
    background-size: cover;
}

其中藍(lán)色陰影區(qū)為內(nèi)容區(qū)，我們會(huì)發(fā)現(xiàn)背景的默認(rèn)起始位置為盒子的padding區(qū)，這也應(yīng)證了padding-box是background-origin的默認(rèn)值。

接下來(lái)我們分別將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;
    /* 用于設(shè)置背景大小的，下文會(huì)進(jìn)行講解，這里只看效果即可 */
    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;
    /* 用于設(shè)置背景大小的，下文會(huì)進(jìn)行講解，這里只看效果即可 */
    background-size: cover;
}

我們會(huì)看到其不一樣的效果，這樣我們就大致的了解了background-origin屬性。

（2）background-clip

background-clip屬性的作用：用于設(shè)置背景圖的向外裁剪的區(qū)域。

常見(jiàn)屬性值：

1. border-box ： 從border 區(qū)域開(kāi)始向外裁剪背景。 —— 默認(rèn)值
2. padding-box ： 從padding 區(qū)域開(kāi)始向外裁剪背景。
3. content-box ： 從content 區(qū)域開(kāi)始向外裁剪背景。

細(xì)心的讀者在上文的例子中就可以發(fā)現(xiàn)，設(shè)置了背景后，如果背景圖片過(guò)大，其背景是從border區(qū)域開(kāi)始向外裁剪背景的（例如）：

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屬性類(lèi)似，我們可以設(shè)置其背景的裁剪邊緣，是從border區(qū)域開(kāi)始向外裁剪背景，還是從padding區(qū)域開(kāi)始向外裁剪背景，還是從content區(qū)域開(kāi)始向外裁剪背景。這里直接展示一下效果：

padding-box：

content-box：

這樣我們就大致的了解了background-clip屬性了。

（3）background-size

background-size屬性的作用：用于設(shè)置背景圖的尺寸。（以下是其設(shè)置背景圖的尺寸的四種方式）：

方式一：用長(zhǎng)度值指定背景圖片大小，不允許負(fù)值。

background-size: 300px 200px;

方式二：用百分比指定背景圖片大小，不允許負(fù)值。

background-size: 100% 100%;

方式三：contain ： 將背景圖片等比縮放，使背景圖片的寬或高，與容器的寬或高相等，再將完整背景圖片包含在容器內(nèi)。

background-size: contain;

如圖：（設(shè)置為contain）：

注意：這種方式設(shè)置背景圖片大小可能會(huì)造成容器里部分區(qū)域沒(méi)有背景圖片。

方式四：cover ：將背景圖片等比縮放，直到完全覆蓋容器，圖片會(huì)盡可能全的顯示在元素上。

background-size: cover;

如圖：（設(shè)置為cover）：

注意：這種方式設(shè)置背景圖片大小可能會(huì)造成容器里部分區(qū)域沒(méi)有背景圖片。

這樣我們就大致的了解了background-size屬性了。

（4）backgorund 復(fù)合屬性

和其他的復(fù)合屬性一樣，backgorund 復(fù)合屬性就是將有關(guān)背景的一些屬性放到一個(gè)屬性里面來(lái)寫(xiě)。但是我們要注意其里面的復(fù)合屬性的前后順序。

前后順序：

background: color url repeat position / size origin clip

注意：

1. origin 和 clip 的值如果一樣，如果只寫(xiě)一個(gè)值，則origin 和 clip 都設(shè)置；如果設(shè)置了兩個(gè)值，前面的是origin ，后面的clip 。
2. size 的值必須寫(xiě)在 position 值的后面，并且用 / 分開(kāi)。

這樣我們就大致的了解了backgorund 復(fù)合屬性了。

補(bǔ)充：多背景圖

我們要知道，在CSS3中允許元素設(shè)置多個(gè)背景圖片，那么我們?nèi)绾谓o一個(gè)元素設(shè)置多個(gè)背景圖片呢？

我們直接使用案例來(lái)進(jìn)行演示：

現(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;
}

我們就會(huì)發(fā)現(xiàn)其背景圖片是由四個(gè)圖片組成的。

2.CSS3新增邊框?qū)傩?/h2>

對(duì)于CSS3新增邊框?qū)傩詠?lái)說(shuō)，總共我們需要知道兩個(gè)，分別是：邊框圓角 和邊框外輪廓。

（1）邊框圓角

先讓我們看一下邊框圓角：

在 CSS3 中，使用border-radius屬性可以將盒子變?yōu)閳A角。例如：

同時(shí)設(shè)置四個(gè)角的圓角：

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;
}

當(dāng)然我們還可以分開(kāi)設(shè)置每個(gè)角的圓角：

屬性名作用
border-top-left-radius設(shè)置左上角圓角半徑：
1. 一個(gè)值是正圓半徑，
2. 兩個(gè)值分別是橢圓的x 半徑、y 半徑。
border-top-right-radius設(shè)置右上角圓角半徑：
1. 一個(gè)值是正圓半徑，
2. 兩個(gè)值分別是橢圓的x 半徑、y 半徑。
border-bottom-right-radius設(shè)置右下角圓角半徑：
1. 一個(gè)值是正圓半徑，
2. 兩個(gè)值分別是橢圓的x 半徑、y 半徑。
border-bottom-left-radius設(shè)置左下角圓角半徑：
1. 一個(gè)值是正圓半徑，
2. 兩個(gè)值分別是橢圓的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;
    /* 長(zhǎng)軸長(zhǎng)為30px，短軸長(zhǎng)為10px */
    border-top-left-radius: 30px 10px;
}

當(dāng)然，邊框圓角還有復(fù)合屬性：（但是基本不會(huì)使用！）

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

這樣我們就大致了解了CSS3新增邊框?qū)傩粤恕?/strong>

（2）邊框外輪廓

先讓我們從效果上看一下什么是邊框外輪廓（如圖）：

其實(shí)邊框外輪廓和border很相似，但是其是在margin區(qū)外的一層邊框。

那了解了什么是邊框外輪廓之后，讓我們看一下其有哪些屬性：

1. outline-width ：外輪廓的寬度。
2. outline-color ：外輪廓的顏色。
3. outline-style ：外輪廓的風(fēng)格。其屬性值有以下幾個(gè)：
（1）none ： 無(wú)輪廓
（2）dotted ： 點(diǎn)狀輪廓
（3）dashed ： 虛線(xiàn)輪廓
（4）solid ： 實(shí)線(xiàn)輪廓
（5）double ： 雙線(xiàn)輪廓
4. outline-offset 設(shè)置外輪廓與邊框的距離，正負(fù)值都可以設(shè)置。

當(dāng)然，邊框外輪廓也有復(fù)合屬性，例如：

outline:50px solid blue;

我們會(huì)發(fā)現(xiàn)其屬性值和border幾乎一模一樣，是的，沒(méi)錯(cuò)，設(shè)置邊框外輪廓就和設(shè)置border類(lèi)似，只不過(guò)需要注意其位置就可以了。

這里我們只講解一下outline-offset ：

outline-offset 是用來(lái)設(shè)置外輪廓與邊框的距離，正負(fù)值都可以設(shè)置。

我們直接使用代碼來(lái)看一下：

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;
}

這樣我們就大致的了解了邊框外輪廓屬性了。

到此這篇關(guān)于CSS3 新增背景屬性 + 新增邊框?qū)傩缘奈恼戮徒榻B到這了,更多相關(guān)CSS3 新增背景屬性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 詳解CSS3新增的背景屬性

    CSS3新增屬性：background-clip ，background-origin ， background-size，本文給大家分享CSS3新增的背景屬性，感興趣的朋友跟隨小編一起看看吧
    2019-12-25

  • 詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性

    這篇文章主要介紹了詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性,既涵蓋了基礎(chǔ)的邊框?qū)挾扰c顏色設(shè)置又講到了CSS3中的圖片邊框及邊框漸變,需要的朋友可以參考下
    2016-05-10

  • CSS3教程:邊框?qū)傩詁order的極致應(yīng)用

    網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用，這些應(yīng)用雖說(shuō)有些劍走偏門(mén)，但在一些特殊的場(chǎng)合，可能還是會(huì)用得上的，如果你對(duì)HTML代碼有潔癖，有
    2009-04-02

最新評(píng)論