CSS3 邊框

border-radius

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

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

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

• 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
• 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
• 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
• 一個值： 四個圓角值相同

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

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

• 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 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

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

border-image

border-image 屬性允許你指定一個圖片作為邊框！ 用于創(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）或鋪滿（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中可以通過background-image屬性添加背景圖片。

不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

#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)境中指定背景圖片的大小。您可以指定像素或百分比大小。

你指定的大小是相對于父元素的寬度和高度的百分比的大小。

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 多個背景圖像

CSS3 允許你在元素上添加多個背景圖像。

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

CSS3 background-clip屬性

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

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

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

CSS3 漸變

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

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

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

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

CSS3 線性漸變

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

線性漸變的實(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);
}

線性漸變 - 對角
你可以通過指定水平和垂直的起始位置來制作一個對角漸變。

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

使用角度

如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預(yù)定義方向（to bottom、to top、to right、to left、to bottom right，等等）。

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

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

漸變角度

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

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

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

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

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

使用透明度

CSS3 漸變也支持透明度（transparent），可用于創(chuàng)建減弱變淡的效果。
為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個參數(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)建一個徑向漸變，你也必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(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ù)定義了漸變的大小。它可以是以下四個值：

• 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屬性連接一個或更多的陰影文本。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為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 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

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

接下來給陰影添加顏色

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

接下來給陰影添加一個模糊效果

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

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

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

陰影的一個使用特例是卡片效果

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)向用戶如何顯示溢出內(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的換行

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

word-wrap: normal|break-word;

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

p {word-wrap:break-word;}

CSS3 單詞拆分換行

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

提示:CJK腳本是中國，日本和韓國（"中日韓"）腳本。

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

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

CSS3字體

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

CSS3 轉(zhuǎn)換

CSS3 轉(zhuǎn)換可以對元素進(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。

translate() 方法

translate

translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(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()方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(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)語法 */

skew() 方法

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

包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(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變換方法合并成一個。

matrix 方法有六個參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。

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()方法，圍繞其在一個給定度數(shù)X軸旋轉(zhuǎn)的元素。

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

rotateY() 方法

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

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

transform-origin 屬性

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

2D轉(zhuǎn)換元素可以改變元素的X和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的Z軸。
注意： 使用此屬性必須先使用 transform屬性。

transform-style

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

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

perspective 屬性

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

定義時的perspective屬性，它是一個元素的子元素，透視圖，而不是元素本身。

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

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

perspective-origin 屬性

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

定義時的perspective -Origin屬性，它是一個元素的子元素，透視圖，而不是元素本身。

backface-visibility 屬性

backface-visibility 屬性定義當(dāng)元素背面向屏幕時是否可見。

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

transform 屬性

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

transform: none|transform-functions;

CSS3 過渡

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

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

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

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

注意： 如果未指定的期限，transition將沒有任何效果，因?yàn)槟J(rèn)值是0。
指定的CSS屬性的值更改時效果會發(fā)生變化。

多項(xiàng)改變

要添加多個樣式的變換效果，添加的屬性由逗號分隔：

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

過渡屬性

下表列出了所有的過渡屬性:

CSS3 動畫

要創(chuàng)建 CSS3 動畫，你需要了解 @keyframes 規(guī)則。

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

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

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

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

• 規(guī)定動畫的名稱
• 規(guī)定動畫的時長

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

注意: 您必須定義動畫的名稱和動畫的持續(xù)時間。如果省略的持續(xù)時間，動畫將無法運(yùn)行，因?yàn)槟J(rèn)值是0。

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

/*當(dāng)動畫為 25% 及 50% 時改變背景色，然后當(dāng)動畫 100% 完成時再次改變*/
@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的動畫屬性

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

CSS3 多列

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

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-* 所有屬性的簡寫。

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 用戶界面

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

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

resize: none|both|horizontal|vertical

div
{
    resize:both;
    overflow:auto;
}

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

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

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

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

CSS3 外形修飾（outline-offset ）

outline-offset 屬性對輪廓進(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 屬性來創(chuàng)建縮略圖。

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

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

響應(yīng)式圖片

響應(yīng)式圖片會自動適配各種尺寸的屏幕。

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

更多見響應(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è)置元素的灰度,通過filter: grayscale(1)設(shè)置整個body為灰色，在2020年清明節(jié)全國哀悼期間，很多網(wǎng)站采用這個設(shè)置。

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

圖片濾鏡

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

.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 屬性來設(shè)置按鈕顏色

按鈕大小

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

圓角按鈕

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

按鈕邊框顏色

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

鼠標(biāo)懸停按鈕

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

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

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

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

按鈕陰影

我們可以使用 box-shadow 屬性來為按鈕添加陰影

禁用按鈕

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

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

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

按鈕寬度

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

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

按鈕組

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

帶邊框按鈕組

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

按鈕動畫

通過偽類設(shè)置形變效果，transition設(shè)置動畫和過渡。

CSS 分頁