CSS3是用于為HTML文檔添加樣式和布局的最新版本的層疊樣式表（Cascading Style Sheets）。下面是一些常用的CSS3屬性及其詳細解釋：
-
border-radius：設置元素的邊框圓角的半徑?？梢允褂盟膫€值設置四個不同的圓角半徑，也可以只使用一個值來設置統(tǒng)一的圓角。
-
box-shadow：創(chuàng)建一個元素的陰影效果?？梢栽O置水平偏移量、垂直偏移量、模糊程度以及顏色值，以實現(xiàn)不同的陰影效果。
-
text-shadow：為文本添加陰影效果?？梢栽O置水平偏移量、垂直偏移量、模糊程度以及顏色值來調(diào)整陰影的外觀。
-
transition：用于在給定的時間段內(nèi)平滑地過渡一個或多個CSS屬性的值。可以設置過渡的屬性、持續(xù)時間、延遲時間和過渡的速度曲線函數(shù)。
-
transform：用于對元素進行旋轉(zhuǎn)、縮放、傾斜或平移變換?？梢酝ㄟ^設置不同的轉(zhuǎn)換函數(shù)來實現(xiàn)各種效果。
-
opacity：設置元素的透明度。取值范圍為0到1，0表示完全透明，1表示完全不透明。
-
background-size：控制背景圖片的尺寸?？梢栽O置具體的寬度和高度值，也可以使用關(guān)鍵詞（如"cover"或"contain"）來調(diào)整圖片的顯示方式。
-
@media：用于根據(jù)設備的特性和媒體查詢條件來應用不同的樣式?？梢愿鶕?jù)屏幕寬度、設備類型等條件來設置樣式規(guī)則。
-
flexbox：一種用于創(chuàng)建靈活的布局的CSS3模塊。通過設置容器的display屬性為"flex"，子元素可以輕松地自動調(diào)整大小和位置。
-
@keyframes：用于創(chuàng)建一個動畫序列的關(guān)鍵幀。通過指定不同的關(guān)鍵幀和相應的樣式規(guī)則，可以實現(xiàn)元素的逐幀動畫效果。
以上僅是CSS3的一些常用屬性，還有許多其他屬性可以用于實現(xiàn)更豐富的樣式效果和動畫效果。需要根據(jù)具體的需求和使用場景選擇合適的屬性來應用樣式。
文本
text-shadow：設置文本的陰影
格式舉例：
text-shadow: 20px 27px 22px pink;
參數(shù)解釋：水平位移 垂直位移 模糊程度 陰影顏色。
效果舉例：
舉例：凹凸文字效果
text-shadow 可以設置多個陰影，每個陰影之間使用逗號隔開。我們來看個例子。
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #666;
}
div {
font-size: 100px;
text-align: center;
font-weight: bold;
font-family: "Microsoft Yahei";
color: #666;
}
/* text-shadow 可以設置多個陰影，每個陰影之間使用逗號隔開*/
.tu {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div class="ao">生命壹號</div>
<div class="tu">生命壹號</div>
</body>
</html>
效果如下：
上圖中，實現(xiàn)凹凸文字效果的方式比較簡單，給左上角放黑色的陰影，右下角放白色的陰影，就達到了凹下去的效果。
盒模型中的 box-ssize 屬性
在盒模型中，box-sizing屬性用于控制元素的盒模型計算方式。而不存在box-ssize屬性。
可用的值有兩種：content-box和border-box。
-
content-box是默認值，表示元素的寬度和高度僅包括內(nèi)容區(qū)域的尺寸，不包括邊框、內(nèi)邊距和外邊距。 -
border-box表示元素的寬度和高度包括內(nèi)容區(qū)域、內(nèi)邊距、邊框的尺寸，但不包括外邊距。
示例代碼：
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
以上例子中，.box元素使用了content-box，其實際寬度為（200 + 2 * 10 + 2 * 1）px，高度為（100 + 2 * 10 + 2 * 1）px。
而.border-box元素使用了border-box，其實際寬度和高度為200px和100px，包括了邊框和內(nèi)邊距在內(nèi)。
這樣設置盒模型計算方式，可以更好地控制元素的尺寸和布局。
模型中的 box-sizing 屬性
我們在之前的文章中專門講過盒模型。
盒模型是CSS布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。CSS定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含：
1. 內(nèi)容區(qū)（Content）：這是元素的實際內(nèi)容，如文本、圖像等。
2. 填充區(qū)（Padding）：填充是內(nèi)容周圍的空間，它位于內(nèi)容和邊框之間。
3. 邊框（Border）：邊框是包圍在內(nèi)容和填充外部的線，它是可見的。
4. 外邊距（Margin）：外邊距是元素外部的空間，它在邊框和其他元素之間。
盒模型分為標準盒模型和怪異盒模型。在標準盒模型中，設置寬高之后，再設置border和padding。這個盒子的整體的寬高就是開始設置的寬高+padding+border，所以剛開始設置的寬高就是內(nèi)容顯示的寬高。而在怪異盒模型中，設置了寬高之后，不管有沒有再設置border和padding，這個盒子都是前面設置的寬高。
CSS3 對盒模型做出了新的定義，即允許開發(fā)人員指定盒子寬度和高度的計算方式。
這就需要用到 box-sizing 屬性。它的屬性值可以是 content-box 或 border-box。解釋如下：
-
content-box是 CSS 的默認方式，此時設置的width和height是內(nèi)容區(qū)域的寬高。此時改變padding和border的大小，也不會改變內(nèi)容的寬高，而是盒子的總寬高發(fā)生變化。盒子的實際寬度 = 設置的width+padding+border。 -
border-box表示內(nèi)減模式，此時設置的width和height是盒子的總寬高。此時改變padding和border的大小，會改變內(nèi)容的寬高，盒子的總寬高不變。盒子的實際寬度 = 設置的width。
需要注意的是，為了處理兼容性問題，我們可以在使用時加上私有前綴，如 -webkit-box-sizing、-moz-box-sizing 等。
示例代碼：
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
以上例子中，.box 元素使用了 content-box，其實際寬度為（200 + 2 * 10 + 2 * 1）px，高度為（100 + 2 * 10 + 2 * 1）px。
而 .border-box 元素使用了 border-box，其實際寬度和高度為200px和100px，包括了邊框和內(nèi)邊距在內(nèi)。
這樣設置盒模型計算方式，可以更好地控制元素的尺寸和布局。
處理兼容性問題：私有前綴
通過網(wǎng)址 http://caniuse.com/ 可以查詢 CSS3 各特性的支持程度。
處理兼容性問題的常見方法是為屬性添加私有前綴。但應盡量避免使用這種方法，無需刻意去處理 CSS3 的兼容性問題。
私有前綴的舉例：
比如說，我想給指定的 div 設置下面這樣一個屬性：
background: linear-gradient(left, green, yellow);
上面這個屬性的作用是添加從左到右的線性漸變，顏色從綠色變?yōu)辄S色。如果直接這樣寫屬性，是看不到效果的：
此時，我們可以為瀏覽器添加不同的私有前綴，屬性就可以生效了。格式如下：
-webkit-: 谷歌、蘋果
-moz-: 火狐
-ms-：IE
-o-：歐朋
格式舉例如下：
background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);
效果如下：
邊框
邊框的屬性很多，其中邊框圓角和邊框陰影這兩個屬性，應用十分廣泛，兼容性也相對較好，且符合漸進增強的原則，需要重點熟悉。
邊框圓角：屬性border-radius
邊框的每個圓角，本質(zhì)上是一個圓，圓有水平半徑和垂直半徑：如果二者相等，就是圓；如果二者不等， 就是橢圓。
單個屬性的寫法：
border-top-left-radius: 60px 120px; /* 參數(shù)解釋：水平半徑 垂直半徑 */
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;
復合寫法：
border-radius: 60px/120px; /* 參數(shù)：水平半徑/垂直半徑 */
border-radius: 20px 60px 100px 140px; /* 從左上開始，順時針賦值。如果當前角沒有值，取對角的值 */
border-radius: 20px 60px;
最簡潔的寫法：（四個角的半徑都相同時）
border-radius: 60px;
舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent {
width: 400px;
}
.box {
width: 100px;
height: 100px;
float: left;
border: 1px solid rgb(144, 12, 63);
margin: 20px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 50px;
background-color: rgb(255, 141, 26);
}
/*畫圓形的方式一*/
.box:nth-child(1) {
border-radius: 50px;
}
/*畫圓形的方式二*/
.box:nth-child(2) {
border-radius: 50%;
}
.box:nth-child(3) {
border-radius: 100px 0 0 0;
}
.box:nth-child(4) {
border-radius: 100px/50px;
}
.box:nth-child(5) {
border-radius: 10%;
}
.box:nth-child(6) {
border-radius: 0 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
效果如下：
邊框陰影：屬性box-shadow
格式舉例：
box-shadow: 水平偏移 垂直偏移 模糊程度 陰影大小 陰影顏色;
參數(shù)解釋：
- 水平偏移：正值向右，負值向左。
- 垂直偏移：正值向下，負值向上。
- 模糊程度：不能為負值。
效果如下：
另外，后面還可以再加一個inset屬性，表示內(nèi)陰影。如果不寫，則默認表示外陰影。例如：
box-shadow: 3px 3px 3px 3px #666 inset;
效果如下：
注意：設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局。
我們還可以設置多重邊框陰影，實現(xiàn)更好的效果，增強立體感。
邊框圖片
邊框圖片有以下屬性：
- 邊框圖片的路徑：
border-image-source: url("images/border.png"); - 圖片邊框的裁剪：
border-image-slice: 27; - 圖片邊框的寬度：
border-image-width: 27px; - 邊框圖片的平鋪：
-
repeat: 正常平鋪，但可能會顯示不完整 -
round: 平鋪，但保證圖片完整 -
stretch: 拉伸顯示 border-image-repeat: stretch;
-
我們也可以寫成一個綜合屬性：
border-image: url("images/border.png") 27/20px round;
這個屬性要好好理解，我們假設拿下面這張圖來作為邊框圖片：
這張圖片將會被"切割"成九宮格形式，然后進行平鋪。四個角位置、形狀保持不變，中心位置和水平垂直向兩個方向平鋪。
文章來源：http://www.zghlxwxcb.cn/news/detail-721284.html
再具體一點：
文章來源地址http://www.zghlxwxcb.cn/news/detail-721284.html
到了這里，關(guān)于CSS3屬性詳解（一）文本 盒模型中的 box-ssize 屬性 處理兼容性問題：私有前綴 邊框 背景屬性 漸變 前端開發(fā)入門筆記（七）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
