CSS3 邊框

border-radius

使用 CSS3 border-radius 屬性铡买，你可以給任何元素制作 "圓角"叶骨，如：背景顏色，邊框绷耍，背景圖片吐限。

border-radius: 1-4 length|% / 1-4 length|%

如果你在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角褂始。
但是诸典，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：

• 四個(gè)值: 第一個(gè)值為左上角崎苗，第二個(gè)值為右上角狐粱，第三個(gè)值為右下角，第四個(gè)值為左下角胆数。
• 三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角肌蜻，第三個(gè)值為右下角
• 兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角
• 一個(gè)值： 四個(gè)圓角值相同

div
{
  border:2px solid;
  border-radius:25px;
}

也可以單獨(dú)定義單個(gè)角的弧度

• border-top-left-radius
  定義了左上角的弧度
• border-top-right-radius
  定義了右上角的弧度
• border-bottom-right-radius
  定義了右下角的弧度
• border-bottom-left-radius
  定義了左下角的弧度

box-shadow

盒陰影

box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 屬性把一個(gè)或多個(gè)下拉陰影添加到框上必尼。該屬性是一個(gè)用逗號(hào)分隔陰影的列表蒋搜，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來(lái)規(guī)定判莉。省略長(zhǎng)度的值是 0豆挽。

div
{
  box-shadow: 10px 10px 5px #888888;
}

border-image

border-image 屬性允許你指定一個(gè)圖片作為邊框！ 用于創(chuàng)建上文邊框的原始圖像：
在 div 中使用圖片創(chuàng)建邊框:

Border

border-image: source slice width outset repeat|initial|inherit;

| 值 | 描述 |
| border-image-source | 用于指定要用于繪制邊框的圖像的位置 |
| border-image-slice | 圖像邊界向內(nèi)偏移 |
| border-image-width | 圖像邊界的寬度 |
| border-image-outset | 用于指定在邊框外部繪制 border-image-area 的量 |
| border-image-repeat | 用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）胡桃、拉伸（stretch）或鋪滿(mǎn)（round）踩叭。 |

div
{
  border-image:url(border.png) 30 30 round;
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

CSS3 background-image屬性

CSS3中可以通過(guò)background-image屬性添加背景圖片。

不同的背景圖像和圖像用逗號(hào)隔開(kāi)，所有的圖片中顯示在最頂端的為第一張容贝。

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS3 background-size 屬性

background-size指定背景圖像的大小自脯。CSS3以前，背景圖像大小由圖像的實(shí)際大小決定斤富。

CSS3中可以指定背景圖片膏潮，讓我們重新在不同的環(huán)境中指定背景圖片的大小。您可以指定像素或百分比大小满力。

你指定的大小是相對(duì)于父元素的寬度和高度的百分比的大小焕参。

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

CSS3 的 background-origin 屬性

background-origin 屬性指定了背景圖像的位置區(qū)域。

content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像油额。

background-origin

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

CSS3 多個(gè)背景圖像

CSS3 允許你在元素上添加多個(gè)背景圖像叠纷。

body
{ 
    background-image:url(img_flwr.gif),url(img_tree.gif);
}

CSS3 background-clip屬性

CSS3中background-clip背景剪裁屬性是從指定位置開(kāi)始繪制。

background-clip: border-box|padding-box|content-box;

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

CSS3 漸變

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

以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果锰蓬。但是幔睬，通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的時(shí)間和寬帶的使用芹扭。此外溪窒，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的冯勉。

CSS3 定義了兩種類(lèi)型的漸變（gradients）：

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

CSS3 線性漸變

為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)摹芙。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色灼狰。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）浮禾。

線性漸變的實(shí)例：

線性漸變

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

線性漸變 - 從上到下（默認(rèn)情況下）,代碼如下

//從上到下
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

從左到右的線性漸變交胚，代碼如下

//從左到右
#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

線性漸變 - 對(duì)角
你可以通過(guò)指定水平和垂直的起始位置來(lái)制作一個(gè)對(duì)角漸變。

//從左上角到右下角
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度

如果你想要在漸變的方向上做更多的控制盈电，你可以定義一個(gè)角度蝴簇，而不用預(yù)定義方向（to bottom、to top匆帚、to right熬词、to left、to bottom right，等等）互拾。

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

角度是指水平線和漸變線之間的角度歪今，逆時(shí)針?lè)较蛴?jì)算。換句話說(shuō)颜矿，0deg 將創(chuàng)建一個(gè)從下到上的漸變寄猩，90deg 將創(chuàng)建一個(gè)從左到右的漸變。

漸變角度

但是骑疆，請(qǐng)注意很多瀏覽器（Chrome田篇、Safari、firefox等）的使用了舊的標(biāo)準(zhǔn)箍铭，即 0deg 將創(chuàng)建一個(gè)從左到右的漸變泊柬，90deg 將創(chuàng)建一個(gè)從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度坡疼，y為非標(biāo)準(zhǔn)角度彬呻。

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用多個(gè)顏色結(jié)點(diǎn)

//帶有多個(gè)顏色結(jié)點(diǎn)的從上到下的線性漸變
#grad {
  background-image: linear-gradient(red, yellow, green);
}

//帶有彩虹顏色和文本的線性漸變
#grad {
  /* 標(biāo)準(zhǔn)的語(yǔ)法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

使用透明度

CSS3 漸變也支持透明度（transparent），可用于創(chuàng)建減弱變淡的效果柄瑰。
為了添加透明度闸氮，我們使用 rgba() 函數(shù)來(lái)定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值教沾，它定義了顏色的透明度：0 表示完全透明蒲跨，1 表示完全不透明。

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

重復(fù)的線性漸變

repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變：

#grad {
  //重復(fù)的線性漸變
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 徑向漸變

徑向漸變由它的中心定義授翻。

為了創(chuàng)建一個(gè)徑向漸變或悲，你也必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色堪唐。同時(shí)巡语，你也可以指定漸變的中心、形狀（圓形或橢圓形）淮菠、大小男公。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)）合陵，漸變的形狀是 ellipse（表示橢圓形）枢赔，漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。
徑向漸變的實(shí)例：

徑向漸變

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

//顏色結(jié)點(diǎn)均勻分布的徑向漸變
#grad {
  background-image: radial-gradient(red, yellow, green);
}

//顏色結(jié)點(diǎn)不均勻分布的徑向漸變
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

設(shè)置形狀

shape 參數(shù)定義了形狀拥知。它可以是值 circle 或 ellipse踏拜。其中，circle 表示圓形低剔，ellipse 表示橢圓形速梗。默認(rèn)值是 ellipse肮塞。

/*形狀為圓形的徑向漸變*/
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

不同尺寸大小關(guān)鍵字的使用

size 參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

/*帶有不同尺寸大小關(guān)鍵字的徑向漸變*/
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
 
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重復(fù)的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復(fù)徑向漸變

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

文本及陰影效果

CSS3 的文本陰影

文本陰影

您指定了水平陰影镀琉，垂直陰影峦嗤，模糊的距離，以及陰影的顏色：

text-shadow: h-shadow v-shadow blur color

注意： text-shadow屬性連接一個(gè)或更多的陰影文本屋摔。屬性是陰影烁设，指定的每2或3個(gè)長(zhǎng)度值和一個(gè)可選的顏色值用逗號(hào)分隔開(kāi)來(lái)。已失時(shí)效的長(zhǎng)度為0钓试。

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3 box-shadow屬性

CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影

box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 屬性把一個(gè)或多個(gè)下拉陰影添加到框上材义。該屬性是一個(gè)用逗號(hào)分隔陰影的列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值嫁赏、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來(lái)規(guī)定其掂。省略長(zhǎng)度的值是 0。

div {
    box-shadow: 10px 10px 5px #888888;
}

接下來(lái)給陰影添加顏色

div {
    box-shadow: 10px 10px grey;
}

接下來(lái)給陰影添加一個(gè)模糊效果

div {
    box-shadow: 10px 10px 5px grey;
}

你也可以在 ::before 和 ::after 兩個(gè)偽元素中添加陰影效果

#boxshadow {
    position: relative;
    b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    pa dding: 10px;
    bac kground: white;
} 
#boxshadow img {
     width: 100%;
     border: 1px solid #8a4419;
     border-style: inset;
} 
#boxshadow::after {
     content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

陰影的一個(gè)使用特例是卡片效果

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

CSS3 Text Overflow屬性

CSS3文本溢出屬性指定應(yīng)向用戶(hù)如何顯示溢出內(nèi)容

text-overflow: clip|ellipsis|string

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

CSS3的換行

如果某個(gè)單詞太長(zhǎng)，不適合在一個(gè)區(qū)域內(nèi)，它擴(kuò)展到外面：

word-wrap: normal|break-word;

CSS3中，自動(dòng)換行屬性允許您強(qiáng)制文本換行 - 即使這意味著分裂它中間的一個(gè)字：

p {word-wrap:break-word;}

CSS3 單詞拆分換行

word-break屬性指定非CJK腳本的斷行規(guī)則侧漓。

提示:CJK腳本是中國(guó)锅尘，日本和韓國(guó)（"中日韓"）腳本。

word-break: normal|break-all|keep-all;

p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

CSS3字體

使用以前 CSS 的版本纵揍，網(wǎng)頁(yè)設(shè)計(jì)師不得不使用用戶(hù)計(jì)算機(jī)上已經(jīng)安裝的字體顿乒。
使用 CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用他/她喜歡的任何字體泽谨。
當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)璧榄，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶(hù)吧雹。
您所選擇的字體在新的 CSS3 版本有關(guān)于 @font-face 規(guī)則描述骨杂。
您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。

CSS3 轉(zhuǎn)換

CSS3 轉(zhuǎn)換可以對(duì)元素進(jìn)行移動(dòng)嚎花、縮放、轉(zhuǎn)動(dòng)呀洲、拉長(zhǎng)或拉伸紊选。

translate() 方法

translate

translate()方法啼止，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)兵罢。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate() 方法

rotate

rotate()方法献烦，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的卖词，這樣是元素逆時(shí)針旋轉(zhuǎn)巩那。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 方法

scale

scale()方法，該元素增加或減少的大小坏平，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語(yǔ)法 */

skew() 方法

transform:skew(<angle> [,<angle>]);

包含兩個(gè)參數(shù)值拢操，分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空舶替，則默認(rèn)為0令境，參數(shù)為負(fù)表示向相反方向傾斜。

skewX(<angle>);表示只在X軸(水平方向)傾斜顾瞪。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜舔庶。

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

matrix() 方法

matrix

matrix()方法和2D變換方法合并成一個(gè)。

matrix 方法有六個(gè)參數(shù)陈醒，包含旋轉(zhuǎn)惕橙，縮放，移動(dòng)（平移）和傾斜功能钉跷。

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

rotateX() 方法

rotateX()方法弥鹦，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}

rotateY() 方法

rotateY()方法爷辙，圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素彬坏。

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

transform-origin 屬性

transform-Origin屬性允許您更改轉(zhuǎn)換元素的位置。

2D轉(zhuǎn)換元素可以改變?cè)氐腦和Y軸膝晾。 3D轉(zhuǎn)換元素栓始，還可以更改元素的Z軸。
注意： 使用此屬性必須先使用 transform屬性血当。

transform-style

transform--style屬性指定嵌套元素是怎樣在三維空間中呈現(xiàn)落恼。

注意： 使用此屬性必須先使用transform屬性.

perspective 屬性

多少像素的3D元素是從視圖的perspective屬性定義领跛。這個(gè)屬性允許你改變3D元素是怎樣查看透視圖。

定義時(shí)的perspective屬性撤奸，它是一個(gè)元素的子元素吠昭，透視圖，而不是元素本身胧瓜。

注意：perspective 屬性只影響 3D 轉(zhuǎn)換元素矢棚。

提示: 請(qǐng)與perspective-origin屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置府喳。

perspective-origin 屬性

perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸弯蚜。該屬性允許您改變 3D 元素的底部位置孔轴。

定義時(shí)的perspective -Origin屬性，它是一個(gè)元素的子元素碎捺，透視圖路鹰，而不是元素本身。

backface-visibility 屬性

backface-visibility 屬性定義當(dāng)元素背面向屏幕時(shí)是否可見(jiàn)雁竞。

如果在旋轉(zhuǎn)元素不希望看到其背面時(shí)，該屬性很有用拧额。

transform 屬性

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換势腮。這個(gè)屬性允許你將元素旋轉(zhuǎn)联贩，縮放，移動(dòng)捎拯，傾斜等泪幌。

transform: none|transform-functions;

CSS3 過(guò)渡

CSS3 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

要實(shí)現(xiàn)這一點(diǎn)尽棕，必須規(guī)定兩項(xiàng)內(nèi)容：

• 指定要添加效果的CSS屬性
• 指定效果的持續(xù)時(shí)間喳挑。

/*應(yīng)用于寬度屬性的過(guò)渡效果，時(shí)長(zhǎng)為 2 秒*/
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

注意： 如果未指定的期限滔悉，transition將沒(méi)有任何效果伊诵，因?yàn)槟J(rèn)值是0。
指定的CSS屬性的值更改時(shí)效果會(huì)發(fā)生變化回官。

多項(xiàng)改變

要添加多個(gè)樣式的變換效果曹宴，添加的屬性由逗號(hào)分隔：

/*添加了寬度，高度和轉(zhuǎn)換效果*/
div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

過(guò)渡屬性

下表列出了所有的過(guò)渡屬性:

CSS3 動(dòng)畫(huà)

要?jiǎng)?chuàng)建 CSS3 動(dòng)畫(huà)，你需要了解 @keyframes 規(guī)則柿扣。

• @keyframes 規(guī)則是創(chuàng)建動(dòng)畫(huà)肖方。
• @keyframes 規(guī)則內(nèi)指定一個(gè) CSS 樣式和動(dòng)畫(huà)將逐步從目前的樣式更改為新的樣式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫(huà)未状，把它綁定到一個(gè)選擇器窥妇，否則動(dòng)畫(huà)不會(huì)有任何效果。

指定至少這兩個(gè)CSS3的動(dòng)畫(huà)屬性綁定向一個(gè)選擇器：

• 規(guī)定動(dòng)畫(huà)的名稱(chēng)
• 規(guī)定動(dòng)畫(huà)的時(shí)長(zhǎng)

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

注意: 您必須定義動(dòng)畫(huà)的名稱(chēng)和動(dòng)畫(huà)的持續(xù)時(shí)間娩践。如果省略的持續(xù)時(shí)間，動(dòng)畫(huà)將無(wú)法運(yùn)行烹骨，因?yàn)槟J(rèn)值是0翻伺。

動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)沮焕。
請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間吨岭，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%峦树。
0% 是動(dòng)畫(huà)的開(kāi)始辣辫，100% 是動(dòng)畫(huà)的完成。
為了得到最佳的瀏覽器支持魁巩，您應(yīng)該始終定義 0% 和 100% 選擇器急灭。

/*當(dāng)動(dòng)畫(huà)為 25% 及 50% 時(shí)改變背景色，然后當(dāng)動(dòng)畫(huà) 100% 完成時(shí)再次改變*/
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

CSS3的動(dòng)畫(huà)屬性

下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫(huà)屬性：

CSS3 多列

CSS3 可以將文本內(nèi)容設(shè)計(jì)成像報(bào)紙一樣的多列布局

CSS3 創(chuàng)建多列

column-count 屬性指定了需要分割的列數(shù)踏枣。

column-count: number|auto;

/*將 <div> 元素中的文本分為 3 列*/
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

CSS3 多列中列與列間的間隙

column-gap 屬性指定了列與列間的間隙。

/*列與列間的間隙為 40 像素*/
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 列邊框

column-rule-style 屬性指定了列與列間的邊框樣式

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

column-rule-width 屬性指定了兩列的邊框厚度

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

column-rule-color 屬性指定了兩列的邊框顏色：

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

column-rule 屬性是 column-rule-* 所有屬性的簡(jiǎn)寫(xiě)。

column-rule: column-rule-width column-rule-style column-rule-color;

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

指定元素跨越多少列

/*指定 <h2> 元素跨越所有列*/
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

指定列的寬度

column-width 屬性指定了列的寬度哗伯。

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

CSS3 用戶(hù)界面

CSS3 調(diào)整尺寸(Resizing)

CSS3中荒揣，resize屬性指定一個(gè)元素是否應(yīng)該由用戶(hù)去調(diào)整大小。
?注意：resize屬性適用于計(jì)算其他元素的溢出值是不是"visible"笋颤。

resize: none|both|horizontal|vertical

div
{
    resize:both;
    overflow:auto;
}

CSS3 方框大小調(diào)整(Box Sizing)

box-sizing 屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。
例如非凌，假如您需要并排放置兩個(gè)帶邊框的框举农，可通過(guò)將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框敞嗡，并把邊框和內(nèi)邊距放入框中颁糟。

box-sizing: content-box|border-box|inherit:

/*規(guī)定兩個(gè)并排的帶邊框方框*/
div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

CSS3 外形修飾（outline-offset ）

outline-offset 屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓障贸。

輪廓與邊框有兩點(diǎn)不同：

• 輪廓不占用空間
• 輪廓可能是非矩形

outline-offset: length|inherit:

/*規(guī)定邊框邊緣之外 15 像素處的輪廓*/
div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

其它特性

CSS 圖片

圓角圖片

跟border-radius用法一致涩维。

縮略圖

我們使用 border 屬性來(lái)創(chuàng)建縮略圖。

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg" alt="Paris">

響應(yīng)式圖片

響應(yīng)式圖片會(huì)自動(dòng)適配各種尺寸的屏幕袁波。

img {
    max-width: 100%;
    height: auto;
}

更多見(jiàn)響應(yīng)式設(shè)計(jì)瓦阐。

圖片文本

文本圖片

卡片式圖片

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

圖片濾鏡

CSS filter 屬性用為元素添加可視效果 (例如：模糊與飽和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性篷牌。

可設(shè)置元素的灰度,通過(guò)filter: grayscale(1)設(shè)置整個(gè)body為灰色垄分，在2020年清明節(jié)全國(guó)哀悼期間，很多網(wǎng)站采用這個(gè)設(shè)置娃磺。

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

圖片濾鏡

響應(yīng)式圖片相冊(cè)

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

CSS 按鈕

按鈕顏色

我們可以使用 background-color 屬性來(lái)設(shè)置按鈕顏色

按鈕大小

我們可以使用 font-size 屬性來(lái)設(shè)置按鈕大小

圓角按鈕

我們可以使用 border-radius 屬性來(lái)設(shè)置圓角按鈕

按鈕邊框顏色

我們可以使用 border 屬性設(shè)置按鈕邊框顏色

鼠標(biāo)懸停按鈕

我們可以使用 :hover 選擇器來(lái)修改鼠標(biāo)懸停在按鈕上的樣式。

提示: 我們可以使用 transition-duration 屬性來(lái)設(shè)置 "hover" 效果的速度

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

按鈕陰影

我們可以使用 box-shadow 屬性來(lái)為按鈕添加陰影

禁用按鈕

我們可以使用 opacity 屬性為按鈕添加透明度 (看起來(lái)類(lèi)似 "disabled" 屬性效果)叫倍。

提示: 我們可以添加 cursor 屬性并設(shè)置為 "not-allowed" 來(lái)設(shè)置一個(gè)禁用的圖片

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按鈕寬度

默認(rèn)情況下偷卧，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長(zhǎng)度 )。 我們可以使用 width 屬性來(lái)設(shè)置按鈕的寬度:

提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位吆倦，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比听诸。

按鈕組

移除外邊距并添加 float:left 來(lái)設(shè)置按鈕組

帶邊框按鈕組

我們可以使用 border 屬性來(lái)設(shè)置帶邊框的按鈕組

按鈕動(dòng)畫(huà)

通過(guò)偽類(lèi)設(shè)置形變效果，transition設(shè)置動(dòng)畫(huà)和過(guò)渡蚕泽。

CSS 分頁(yè)