CSS3 新增背景屬性 + 新增邊框屬性（如果想知道CSS3新增背景屬性和新增邊框屬性的知識點，那么只看這一篇就夠了！）

? ? ? ? 前言：CSS3在CSS2的基礎上，新增了很多強大的新功能，從而解決一些實際面臨的問題，本篇文章主要講解的為CSS3新增背景屬性和新增邊框屬性。

???這里是秋刀魚不做夢的BLOG

???想要了解更多內容可以訪問我的主頁秋刀魚不做夢-CSDN博客

先讓我們看一下本篇文章的大致內容：

目錄

1.CSS3 新增背景屬性

? ? ? ? （1）background-origin

? ? ? ? （2）background-clip

? ? ? ? （3）background-size

? ? ? ? （4）backgorund 復合屬性

? ? ? ? 補充：多背景圖

2.CSS3新增邊框屬性

? ? ? ? （1）邊框圓角

? ? ? ? （2）邊框外輪廓

1.CSS3 新增背景屬性

? ? ? ? 先讓我們來看一下有哪些新增的屬性：

接下來我們一一進行講解：

? ? ? ? （1）background-origin

background-origin屬性作用：用于設置背景圖的原點。

常見屬性值：

????????1. padding-box ：從padding 區域開始顯示背景圖像。—— 默認值
????????2. border-box ： 從border 區域開始顯示背景圖像。
????????3. content-box ： 從content 區域開始顯示背景圖像。

我們從常見屬性值中我們就可以發現，padding-box是background-origin的默認值，也就是說背景圖片是從padding區域開始顯示背景圖像的（例如）：

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

其中藍色陰影區為內容區，我們會發現背景的默認起始位置為盒子的padding區，這也應證了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屬性的作用：用于設置背景圖的向外裁剪的區域。

常見屬性值：

????????1. border-box ： 從border 區域開始向外裁剪背景。 —— 默認值
????????2. padding-box ： 從padding 區域開始向外裁剪背景。
????????3. content-box ： 從content 區域開始向外裁剪背景。

細心的讀者在上文的例子中就可以發現，設置了背景后，如果背景圖片過大，其背景是從border區域開始向外裁剪背景的（例如）：

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區域開始向外裁剪背景，還是從padding區域開始向外裁剪背景，還是從content區域開始向外裁剪背景。這里直接展示一下效果：

????????padding-box：

????????

????????content-box：

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

????????

? ? ? ? （3）background-size

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

????????方式一：用長度值指定背景圖片大小，不允許負值。

background-size: 300px 200px;

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

background-size: 100% 100%;

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

background-size: contain;

如圖：（設置為contain）：

注意：這種方式設置背景圖片大小可能會造成容器里部分區域沒有背景圖片。

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

background-size: cover;

如圖：（設置為cover）：

注意：這種方式設置背景圖片大小可能會造成容器里部分區域沒有背景圖片。

這樣我們就大致的了解了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中允許元素設置多個背景圖片，那么我們如何給一個元素設置多個背景圖片呢？

我們直接使用案例來進行演示：

現在我們將剛才的背景圖片改為多背景圖：

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

我們就會發現其背景圖片是由四個圖片組成的。

2.CSS3新增邊框屬性

對于CSS3新增邊框屬性來說，總共我們需要知道兩個，分別是：邊框圓角 和?邊框外輪廓。

? ? ? ? （1）邊框圓角

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

在 CSS3 中，使用border-radius屬性可以將盒子變為圓角。例如：

同時設置四個角的圓角：

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新增邊框屬性了。

? ? ? ? （2）邊框外輪廓

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

其實邊框外輪廓和border很相似，但是其是在margin區外的一層邊框。

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

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;

????????我們會發現其屬性值和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;
}

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

想了解更多HTML+CSS知識------------------->CSS_秋刀魚不做夢的博客-CSDN博客

以上就是本篇文章的所有內容了~~~

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/14498.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/14498.shtml
英文地址，請注明出處：http://en.pswp.cn/web/14498.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

視覺SLAM十四講：從理論到實踐（Chapter5：相機與圖像）

視覺SLAM十四講：從理論到實踐（Chapter5：相機與圖像）

前言 學習筆記&#xff0c;僅供學習&#xff0c;不做商用&#xff0c;如有侵權&#xff0c;聯系我刪除即可 目標 理解針孔相機的模型、內參與徑向畸變參數。理解一個空間點是如何投影到相機成像平面的。掌握OpenCV的圖像存儲與表達方式。學會基本的攝像頭標定方法。 一、相…
閱讀更多...
機器學習第四十周周報 WDN GGNN

機器學習第四十周周報 WDN GGNN

文章目錄 week40 WDN GGNN摘要Abstract一、文獻閱讀1. 題目2. abstract3. 網絡架構3.1 問題提出3.2 GNN3.3 CSI GGNN 4. 文獻解讀4.1 Introduction4.2 創新點4.3 實驗過程4.3.1 數據獲取4.3.2 參數設置4.3.3 實驗結果 5. 結論二、GGNN1. 代碼解釋2. 網絡結構小結參考文獻參考文…
閱讀更多...
Vue 2 和 Vue 3 中同步和異步

Vue 2 和 Vue 3 中同步和異步

Vue 2 和 Vue 3 中同步和異步 Vue 2 同步和異步 同步更新 (Synchronous Updates) Vue 2 在數據更新后會進行同步渲染更新，但為了性能優化，Vue 會在內部隊列中異步地進行 DOM 更新。這意味著數據變化會立即被捕捉到，但實際的 DOM 更新會被推遲到下一個事件循環隊列中。new V…
閱讀更多...
基礎3 探索JAVA圖形編程桌面：邏輯圖形組件實現

基礎3 探索JAVA圖形編程桌面：邏輯圖形組件實現

在一個寬敞明亮的培訓教室里&#xff0c;陽光透過窗戶柔和地灑在地上&#xff0c;教室里擺放著整齊的桌椅。臥龍站在講臺上&#xff0c;面帶微笑&#xff0c;手里拿著激光筆&#xff0c;他的眼神中充滿了熱情和期待。他的聲音清晰而洪亮&#xff0c;傳遍了整個教室&#xff1a;…
閱讀更多...
Linux模擬考試

Linux模擬考試

注意&#xff0c;以下答案僅供參考 1、某CentOS系統空間不夠&#xff0c;現加一塊100G的硬盤(是系統的第二塊硬盤&#xff09;&#xff0c;分為一個區99G&#xff0c;掛載點是/data&#xff0c;請寫出從分區到掛載并使用的整個步驟及相關命令。 1.創建分區&#xff1a; sudo f…
閱讀更多...
HTML5 通信方式及應用

HTML5 通信方式及應用

目錄 postMessage APIWebSocketsServer-Sent Events (SSE)Fetch API / XMLHttpRequest (XHR)Web Workers & Service WorkersHTML5 提供了多種通信方式，使得瀏覽器中的Web應用能夠實現頁面間、窗口間、甚至與外部服務的有效通信。這些通信方式大大提升了Web應用的交互性和復…
閱讀更多...
Hsql每日一題 | day02

Hsql每日一題 | day02

前言 就一直向前走吧&#xff0c;沿途的花終將綻放~ 題目&#xff1a;主播同時在線人數問題 如下為某直播平臺主播開播及關播時間&#xff0c;根據該數據計算出平臺最高峰同時在線的主播人數。 id stt edt 1001,2021-06-14 12:12:12,2021-06-14 18:1…
閱讀更多...
【錯誤解決】使用HuggingFaceInstructEmbeddings時的一個錯誤

【錯誤解決】使用HuggingFaceInstructEmbeddings時的一個錯誤

起因&#xff1a;使用huggingface構建一個問答程序時出現的問題。 錯誤內容&#xff1a; 分析&#xff1a; 查看代碼發現&#xff0c;HuggingFaceInstructEmbeddings和sentence-transformers模塊版本不兼容導致。 可以明顯看到方法參數不同。 解決&#xff1a; 安裝sentenc…
閱讀更多...
json 讀寫 python

json 讀寫 python

目錄 這里對json保存做了格式封裝 調用代碼&#xff1a; python json原始保存是所有json保存一行&#xff0c; 這里對json保存做了格式封裝 import numpy as np class MyEncoder(json.JSONEncoder):def default(self, obj):if isinstance(obj, np.integer):return int(obj)…
閱讀更多...
element-ui的Form 表單有些項的參數校驗

element-ui的Form 表單有些項的參數校驗

項目場景&#xff1a; 提示&#xff1a;項目相關背景&#xff1a; 項目場景&#xff1a;有時候自己的Form 表單中的某幾項引入的一些項不好去校驗 這樣的咋去校驗呢&#xff1f; 解決方案&#xff1a; 提示&#xff1a;問題的具體解決方案&#xff1a; 例如&#xff1a;寫一…
閱讀更多...
【pyspark速成專家】3_Spark之RDD編程1

【pyspark速成專家】3_Spark之RDD編程1

目錄 ?編輯 一&#xff0c;創建RDD 二&#xff0c;常用Action操作 三&#xff0c;常用Transformation操作 一&#xff0c;創建RDD 創建RDD主要有兩種方式&#xff0c;一個是textFile加載本地或者集群文件系統中的數據&#xff0c; 第二個是用parallelize方法將Driver中的…
閱讀更多...
fortran77 初始化矩陣 打印矩陣 模版 備拷

fortran77 初始化矩陣 打印矩陣 模版 備拷

1&#xff0c;源碼 SUBROUTINE INIT_MATRIX(A, m, n, lda)DOUBLE PRECISION A(*)CALL SRAND(2024)DO i1, mDO j1, nA(i lda*(j-1)) RAND() RAND() C WRITE(*, (F8.4)) A(i)END DOEND DOENDSUBROUTINE PRINT_MATRIX(A, m, n, lda)DOUBLE PREC…
閱讀更多...
解釋Python中的上下文管理器（context manager）

解釋Python中的上下文管理器（context manager）

Python中的上下文管理器&#xff08;Context Manager&#xff09;是一種用于管理某些資源的對象&#xff0c;如文件、網絡連接、數據庫連接等。這些資源在使用完畢后需要進行清理操作&#xff0c;如關閉文件、斷開連接等。通過上下文管理器&#xff0c;Python提供了一種優雅的方…
閱讀更多...
【Vue3】封裝axios請求（cli和vite）

【Vue3】封裝axios請求（cli和vite）

原文作者&#xff1a;我輩李想 版權聲明&#xff1a;文章原創&#xff0c;轉載時請務必加上原文超鏈接、作者信息和本聲明。 Vue 【Vue3】env環境變量的配置和使用&#xff08;區分cli和vite&#xff09; 文章目錄 Vue前言一、常見用法二、vue3cli封裝接口1..env配置2..dev(開…
閱讀更多...
ADC協議詳解

ADC協議詳解

文章目錄 簡介工作流程原理圖時序圖 優點與缺點 簡介 模數轉換器&#xff08;ADC&#xff0c;Analog-to-Digital Converter&#xff09;是一種將模擬信號轉換為數字信號的電子設備。模擬信號通常表示物理測量的連續變化&#xff0c;如聲音、溫度、壓力等&#xff0c;而數字信號…
閱讀更多...
codewars check_same_case 題解

codewars check_same_case 題解

題目 編寫一個函數來檢查兩個給定的字符是否大小寫相同。 如果任何字符不是字母&#xff0c;則返回-1如果兩個字符大小寫相同&#xff0c;則返回1如果兩個字符都是字母且大小寫不同&#xff0c;則返回0 例子 a并g返回1A并C返回1b并G返回0B并g返回00并?返回-1題解 1 此題主…
閱讀更多...
AI大模型與產品策略：產品經理的致勝之道

AI大模型與產品策略：產品經理的致勝之道

隨著AI大模型的快速進化&#xff0c;其生態的構建&#xff0c;已經從C端過度到了B端。 作為產品經理&#xff0c;我們應該及時響應大趨勢&#xff0c;在產品策略上融入AI大模型模塊&#xff0c;深度挖掘AI大模型的應用價值&#xff0c;這才是作為PM在現階段最有價值的地方。 …
閱讀更多...
想學接口測試，不知道那個工具適合？

想學接口測試，不知道那個工具適合？

引言&#xff1a; 接口測試在軟件開發中扮演著至關重要的角色&#xff0c;它可以幫助我們驗證系統的功能、性能和安全性。而選擇適合的工具是進行接口測試的重要一步。本文將從零開始&#xff0c;為你詳細介紹如何選擇合適的工具&#xff0c;并提供規范的指導。 一、了解接口…
閱讀更多...
初識C語言——第二十八天

初識C語言——第二十八天

代碼練習1&#xff1a; 用函數的方式實現9*9乘法表 void print_table(int n) {int i 0;int j 0;for (i 1; i< n; i){for (j 1; j< i; j){printf("%d*%d%-3d ", i, j, i * j);}printf("\n");}}int main() {int n 0;scanf("%d", &a…
閱讀更多...
shell :二進制安裝docker

shell :二進制安裝docker

#!/bin/bash #設置字體顏色 function RedFont(){echo -e "\033[31mError: $1 \033[0m" }function GreenFont(){echo -e "\033[32mInfo: $1 \033[0m" }function YellowFont(){echo -e "\033[33mWarning: $1 \033[0m" }CURRENT_DIRpwd FILE_NAMEdo…
閱讀更多...
最新文章

Copyright @ 2022~2023