?2 CSS3 圓角

在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用于設(shè)置元素的外邊框圓角。

所有四個邊角 border-top/bottom-left/right-radius 屬性的縮寫

border-top-left-radius: 50px; /*表示半徑為50px圓*/

border-top-left-radius: 50px 100px; /*表示水平半徑為50px，垂直半徑為100px的橢圓*/

border-radius: 5px; /*相當于 border-top/bottom-left/right-radius: 5px 5px;*/

border-radius: 5px 10px; /*上下、左右 border-top-left/bottom-right: 5px; border-top-right/bottom-left: 10px;*/

border-radius: 5px 10px 15px; /*上、左右、下 border-top-left: 5px; border-top-right/bottom-left: 10px; border-bottom-right: 15px;*/

border-radius: 5px 10px 15px 20px; /*上、右、下、左 border-top-left: 5px; border-top-right: 10px; border-bottom-right: 15px; border-bottom-left: 20px;*/

border-radius: 5px / 5px; /*水平半徑和垂直半徑相等，故為圓*/

border-radius: 5px / 5px 10px; /*左上角和右下角水平半徑和垂直半徑為5px的圓，右上角和左下角水平半徑為5px，垂直半徑為10px的橢圓*/

border-radius: 5px / 5px 10px 15px; /*左上角半徑為5px的圓，右上角和左下角水平半徑為5px，垂直半徑為10px的橢圓，右下角水平半徑為5px，垂直半徑為15px的橢圓*/

border-radius: 5px / 5px 10px 15px 20px; /*左上角半徑為5px的圓，右上角水平半徑為5px，垂直半徑為10px的橢圓，右下角水平半徑為5px，垂直半徑為15px的橢圓故為圓，左下角水平半徑為5px，垂直半徑為20px的橢圓*/

border-radius: 50%; /*表示半徑為當前盒子的寬度/高度的50%，超過50%以50%來呈現(xiàn)*/

代碼如下：

#rcorners-test {

border-top-left-radius: 150px 75px;

/* border-top-right-radius: 100px 75px; */

border: 2px solid #8ac007;

width: 200px;

height: 150px;

}

代碼如下，藍色和黃色是截圖

#rcorners2 {

border-radius: 50%;

border: 2px solid red;

padding: 20px;

width: 200px;

height: 150px;

}

代碼如下，黃色是截圖，

#rcorners3 {

border-radius: 50% / 20%;

border: 2px solid red;

width: 200px;

height: 150px;

}

?3 CSS3 文本補充

CSS2：

屬性描述屬性值color設(shè)置文本顏色rgb HEX rgbaletter-spacing設(shè)置字符間距pxline-height設(shè)置行高pxtext-align對齊元素中的文本leftcenterrightjustify (兩端對齊)text-decoration向文本添加修飾text-decoration: underline wavy red; 紅色波浪下劃線 wavy 波浪線none (默認 無效果)underline (下劃線)overline(上劃線)line-through ( 刪除線)text-indent縮進元素中文本的首行em pxtext-transform控制元素中的字母capitalize 每個單詞首字母大寫uppercase 全部大寫lowercase 全部小寫vertical-align設(shè)置元素的垂直對齊baseline 基線 默認middle 中線super 文本上標sub 文本下標top 頂端對齊最高元素頂端text-top 元素頂端與父元素字體頂端bottom 底端與最低元素底端text-bottom 底端與父元素字體底端white-space設(shè)置元素中空白的處理方式(主要控制換行)normal 默認 忽略空白pre 保留空白 nowrap 文本不換行pre-wrap 保留空白 正常換行pre-line 合并空白 保留換行符word-spacing設(shè)置字間距px em

CSS3：

屬性描述屬性值text-align-last設(shè)置如何對齊最后一行或緊挨著強制換行符之前的行。left right justify centertext-overflow規(guī)定當文本溢出包含元素時發(fā)生的事情。clip 剪裁ellipsis 省略號text-shadow向文本添加陰影。text-shadow: h-shadow v-shadow blur color;h-shadow 水平偏移v-shadow 垂直偏移blur 陰影模糊值color 顏色word-break規(guī)定非中日韓文本的換行規(guī)則。對英文而言，斷字符（以“one by one”為例，將“on”和“e by one”分為兩行顯示）。normal使用瀏覽器默認規(guī)則break-all 單詞內(nèi)換行keep-all 只能在半角空格或連字符處換行word-wrap控制換行。當屬性取值break-word時，將強制換行，中文文本沒有任何問題，英文語句也沒有問題。但是對于長串的英文就不起作用，也就是說，對英文而言，word-wrap: break-word是控制是否斷詞（以“one by one”為例，將“one by”和“one”分為兩行顯示），而不是斷字符（以“one by one”為例，將“on”和“e by one”分為兩行顯示）。normal 單詞內(nèi)不換行break-word 單詞內(nèi)可換行

為了解決長串英文的問題，一般將word-break:break-all和word-wrap:break-word聲明結(jié)合使用。

CSS3增強的顏色功能：

屬性描述屬性值HSL顏色表示方式通過對色調(diào)（H）、飽和度（S）、亮度（L）三個顏色通道的變化以及它們相互之間的疊加來表示各式各樣的顏色HSLA顏色表示方式HSLA是在HSL的基礎(chǔ)上增加一個透明度（A）的設(shè)置RGBA顏色表示方式RGBA是在RGB的基礎(chǔ)上增加一個透明度（A）的設(shè)置opactiy顏色定義不透明度

關(guān)于HSL：這個標準幾乎包括了人類視力可以感知的所有顏色，在屏幕上可以重現(xiàn)16 777 216種顏色，語法如下：

hsl(, , )

/*length 表示色調(diào)（Hue）。Hue衍生于色盤，取值可以為任意數(shù)值，其中0（或360，或-360）表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍色，300表示洋紅，當然可以設(shè)置其他數(shù)值來確定不同的顏色。*/

/*percentage表示飽和度（Saturation），表示該色彩被使用了多少，即顏色的深淺程度和鮮亮程度。取值為0%到100%之間的值，其中0%表示灰度，即沒有使用該顏色；100%的飽和度最高，即顏色最鮮亮。*/

/*percentage表示亮度（Lightness）。取值為0%到100%之間的值，其中0%最暗，顯示為黑色，50%表示均值，100%最亮，顯示為白色。*/

?4 CSS3 calc 函數(shù)

calc() 此CSS函數(shù)讓你在聲明CSS屬性值時執(zhí)行一些計算。

width: calc(100% - 80px);

括號里面可以使用 加減乘除（+ - * /） 來進行計算。

?5 CSS 變量

css 中我們可以統(tǒng)一設(shè)置 變量 方便頁面維護

?5.1 聲明

變量聲明的時候，變量名之前加上兩根連詞線（--）即可。例如：

body {

--foo: #7F583F;

--bar: #F7EFD2;

}

/* foo 與 bar是變量名稱 他們的值分別是 #7F583F 和 #f7EFD2*/

變量名稱規(guī)范使用：

使用純英文的單詞字母進行命名而變量名中存儲的值的書寫規(guī)則仍然采用 css 的規(guī)則，如： --x: 20px 30px， 而不是 --x: '20px 30px' 。

?5.2 變量使用：var() 函數(shù)

var() 函數(shù)是用來讀取變量，如下例：

a {

--foo：#f1f2f5;

--bar: red;

color: var(--foo);

text-decoration-color: var(--bar);

}

var() 函數(shù)有第二個參數(shù)，表示變量的默認值，如果該變量不存在(第一個參數(shù))，那么就使用這個默認值。并且，第一個參數(shù)后面的全部算第二個參數(shù)，不管有多少個逗號，比如：

var(--font-stack, "Roboto", "Helvetica");

var(--pad, 10px 15px 20px);

另外， var() 函數(shù)也可作為其他變量的值，但也僅作為其他變量的值使用：

html {

--primary-color: red;

--logo-text: var(--primary-color);

/* 無效 */

var(--primary-color): green;

}

?5.3 變量作用域

css 變量遵從 css 優(yōu)先級的原則 變量值會被覆蓋

html {

--color: blue;

}

div {

--color: green;

}

#alert {

--color: red;

}

* {

color: var(--color);

}

html

我的顏色為 blue

?6 CSS3 漸變（Gradients）

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。

以前，你必須使用圖像來實現(xiàn)這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

CSS3 定義了兩種類型的漸變（gradients）：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向，https://www.runoob.com/cssref/func-linear-gradient.html徑向漸變（Radial Gradients）- 由它們的中心定義，https://www.runoob.com/cssref/func-radial-gradient.html

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

?6.1 線性漸變

從一個方向到另一個方向的，水平、垂直、斜線的漸變

示例1：線性漸變 - 從上到下（默認情況下）

background-image: linear-gradient(red, yellow);

示例2：線性漸變 - 從左到右

background-image: linear-gradient(to right, red, yellow);

示例3：線性漸變-左上到右下

background-image: linear-gradient(to bottom right, red, yellow);

示例4：任意角度

background-image: linear-gradient(-90deg, red, yellow);

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。

但是，請注意很多瀏覽器（Chrome、Safari、firefox 等）的使用了舊的標準，即 0deg 將創(chuàng)建一個從左到右的漸變，90deg 將創(chuàng)建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度，y 為非標準角度。

示例5：多種顏色

/*彩虹色*/

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

示例6：使用透明度

background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

示例7：重復(fù)線性漸變

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

/*red ---> yellow 占父盒子的10%，yellow ----> green 從10%漸變到20%*/

/*默認是從上到下，每一份漸變占20%，父盒子里面會重復(fù)出現(xiàn)5次*/

?6.2 徑向漸變

示例1：普通模式

background-image: radial-gradient(red, yellow, green);

示例2：分配比例

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

示例3：設(shè)置形狀

background-image: radial-gradient(circle, red, yellow, green);

/*默認為橢圓 ellipse*/

示例4：重復(fù)漸變

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

?7 CSS3 濾鏡filter（了解）

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多個濾鏡。

注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數(shù)來表示 (如：0.75)。

參考文檔：https://www.runoob.com/cssref/css3-pr-filter.html

演示了所有濾鏡的使用方法：https://www.runoob.com/try/try.php?filename=trycss3_filter_all

Filter描述none默認值，沒有效果。blur(px)給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設(shè)定值，則默認是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。brightness(%)給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認是1。contrast(%)調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設(shè)置值，默認是1。drop-shadow(h-shadow v-shadow blur spread color)給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。參數(shù)如下： (必須)：這是設(shè)置陰影偏移量的兩個 值. 設(shè)定水平方向距離. 負值會使陰影出現(xiàn)在元素左邊. 設(shè)定垂直距離.負值會使陰影出現(xiàn)在元素上方。查看可能的單位。如果兩個值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 and/or ，會有模糊效果)。 (可選)：這是第三個值。值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設(shè)定，默認是0 (則陰影的邊界很銳利)。 (可選)：這是第四個 值. 正值會使陰影擴張和變大，負值會是陰影縮小。若未設(shè)定，默認是0 (陰影會與元素一樣大小)。注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。 (可選)：查看 該值可能的關(guān)鍵字和標記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應(yīng)用color屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。grayscale(%)將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0；hue-rotate(deg)給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。invert(%)反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設(shè)置，值默認是0。opacity(%)轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。saturate(%)轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認是1。sepia(%)將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0；多個值使用多個濾鏡，每個濾鏡使用空格分隔。注意: 順序是非常重要的 (例如使用 grayscale() 后再使用 sepia()將產(chǎn)生一個完整的灰度圖片)。例如，filter: contrast(200%) brightness(150%);

CSS3 常用樣式

柚子快報邀請碼778899分享：前端 CSS3 常用樣式

http://yzkb.51969.com/

好文閱讀