強大的css3

時間 2019-11-18

標籤強大 css3 css 欄目 CSS 简体版

原文原文鏈接

強大的css3

　　咱們知道，這幾年來智能手機的高速發展使得人們使用移動端上網的時間和人數已經超過了PC端。例如在2015年，就中國電商而言，各電商平臺在移動端持續發力，移動端購物佔比不斷攀升，雙11期間，天貓交易額突破912億元，其中移動端交易額佔比68%，京東移動端下單量佔比達到74%，其他各大電商平臺移動端的支付比例也在60%-80%之間。即移動端在2015年超越PC端，成爲網購市場的主流選擇。這也使得網頁設計師須要更加註重移動端的網頁製做，而移動端對於HMTL5和CSS3目前已經支持的很是好了，因此學習HTML5和CSS3已是大勢所趨，所以，這裏會主要探討基本的CSS3知識。php

　　第一部分：css3簡介

　　咱們知道css即cascading style sheet，中文是層疊樣式表的意思。它用來控制網頁的樣式和佈局，而css3正是最新的css標準，可是主流的瀏覽器對css3已經支持的很好了，不！除了IE！！由於css3中的不少屬性都不能被IE9如下的瀏覽器支持，然而國內目前還有不少的IE8瀏覽器，甚至還有IE6！因此，通常在PC端咱們不能徹底使用CSS3，而在移動端，幾乎全部的瀏覽器都是支持css3的。（注意：實際上目前css3仍在開發中...）css

　　css3中有如下幾種重要的模塊，如　選擇器、盒模型、背景和邊框、文字特效、2D/3D轉換、動畫、多列布局和用戶界面。html

　　第二部分：css3邊框

　　這部份內容將會介紹三個重要的屬性：border-radius、box-shadow、border-image。android

　　1.border-radiuscss3

　　咱們知道在css2中添加圓角是很棘手的，咱們必須在每一個角落使用不一樣的圖像，或者是使用PS來解決這個問題。所以，當我知道存在border-radius屬性時，我仍是十分開心的，終於能夠輕鬆的建立圓角了。以下所示：web

效果圖以下：瀏覽器

這樣一個半徑爲5px的圓角。固然，它還有更爲強大的功能--畫圓！　　css3動畫

代碼以下所示：ide

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圓角</title>
	<style>
		.circle{width: 30px;height: 30px;background: red;border-radius: 15px;}
	</style>
</head>
<body>
	<div class="circle"></div>
</body>
</html>

效果圖以下所示：函數

　　實際上，它的四個角還能夠分別設置即：border-radius:5px 10px 15px 20px;分別表示左上角、右上角、右下角、左下角的半徑。html代碼同上，css以下代碼：

.circle{
width: 30px;height: 30px;background: red;
 border-radius: 5px 10px 15px 20px;
}

　　咱們能夠獲得效果以下：

　　另外，若是對border-radius指定兩個值,那麼第一個值爲左上角和右下角，第二個值爲右上角和左下角。若是指定三個值，那麼第一個值爲左上角，第二個值爲右上角和左下角，第三個值爲右下角。這裏例子看這裏。

　　2.box-shadow

　　這個屬性能夠用來添加陰影。

　　如box-shadow:10px 10px 5px blue;表示水平陰影的位置向右偏移10px；豎直陰影的位置向下偏移10px；陰影模糊的距離爲5px；陰影的顏色爲藍色。（注意：對於水平陰影的位置和豎直陰影的位置使用的座標是：向右爲X的正半軸、向下爲Y的正半軸）

　　css代碼以下：

div{width: 30px;height: 30px;background: red; box-shadow:10px 20px 15px blue;}

　　效果圖以下：

　　3.border-image

　　使用該屬性，咱們可使用圖片建立一個邊框，即它容許咱們指定一個圖片做爲邊框做爲建立邊框的原始圖像。這個屬性暫時不介紹。

　　第三部分：css3背景

　　1.background-image屬性

　　該屬性能夠來添加多張背景圖片，不一樣的背景圖像用逗號隔開便可。同時可使用background-position和background-repeat來設置不一樣不一樣圖片的值，用逗號隔開，舉例以下：

代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>image</title> 
<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

　　效果圖以下：

　　2.background-size屬性　　

　　若是不使用css3，那麼咱們想要改變背景圖片的大小就只能修改其真實大小，而使用了css3，咱們就可使用background-size來改變大小了。舉例以下：

對於一個div，css代碼以下（注意：必定要設定div的寬度和高度，不然背景圖片不可能顯示）：

		div{
			width: 505px;
			height: 505px;
			background-image: url(shenme.jpg);
			/*background-size: 50px 100px;*/
			background-repeat: no-repeat;
		}

　　效果圖以下：

若是加上background-size:50px 100px;即寬爲50px；高爲100px；那麼效果以下：

另外，咱們也可使用百分比大小，它是相對與父元素的寬度和高度的百分比的大小。

如background-size:50% 50%;效果圖以下：

即寬度和高度就成了父元素（div）的一半了。

　　3.backgrond-origin屬性。

　這個屬性指定了背景圖像的位置區域。即背景圖片能放在哪裏，這個屬性默認是padding-box。

舉例以下：

代碼以下,此時爲默認值，即padding-box：

			width: 505px;
			height: 505px;
			border:80px solid gray;
			padding: 50px;
			background-image: url(shenme.jpg);
			background-size: 50% 50%;
			background-repeat: no-repeat;
			background-origin:padding-box;

效果以下：

當咱們把background-origin設置位border-box效果如下：

咱們發現背景圖其實是從border的最外層開始的。（實際上這裏把border的樣式設置位dotted會更容易觀察，你們能夠自行嘗試）

當咱們把background-origin設置爲content-box，效果以下：

　　4.background-clip屬性

　　該屬性能夠裁剪指定位置的背景，一樣能夠設置屬性值爲content-box，padding-box和border-box。具體例子看這裏。

　　第四部分：CSS3漸變

　　css3漸變(gradients)可讓你在兩個或者多個指定的顏色之間顯示平穩的過分。以下圖所示：

即經過css3咱們能夠作出上述「彩虹」。下面就讓咱們一塊兒來學習吧。

　　css3中規定了兩種方式的漸變：

線性漸變（Linear Gradients）--這種漸變能夠向上、向下、向左、向右甚至是各個你想要的方向。
徑向漸變（Radial Gradients）--這種漸變即由中心出發，向四周漸變。

　1.css3線性漸變

　　這種漸變你必須定義至少兩種顏色，也就是說能夠更多種甚至不限制數量。

　　語法以下：

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

　　第一個參數爲方向，若是咱們不指定，那麼默認爲從上到下。第一個顏色參數即爲開始的第一個顏色，注意：因爲不一樣的瀏覽器支持程度不一樣，因此咱們須要多寫幾句。以下：

值得注意的是對於標準的語法，必須放在最後一句。(這一部分以及更多規範能夠看個人博文《如何寫出優雅的css代碼？》)

效果以下所示：

若是須要從左到右，能夠添加第一個參數，對於標準而言，第一個參數是to right，以下：

效果以下所示：

固然，咱們還可使用任何咱們想要的角度，語法以下：

background:linear-gradient(angle,color1,color2,....);

注意，角度以下所示：

以下列代碼：

	div{
	  width: 500px;height: 500px;	
	  background: -webkit-linear-gradient(50deg, red , blue); /* Safari 5.1 - 6.0 */
	  background: -o-linear-gradient(50deg, red, blue); /* Opera 11.1 - 12.0 */
	  background: -moz-linear-gradient(50deg, red, blue); /* Firefox 3.6 - 15 */
	  background: linear-gradient(50deg, red , blue); /* 標準的語法 */
	}

效果以下所示：

　2.使用透明度（Transparency）

　在css3中也支持透明度，能夠用於建立減弱變淡的效果。方法很簡單，只須要把顏色使用rgba()來表達便可，rgba的最後一個值表示不透明度：0表示徹底透明，1表示徹底不透明。

代碼以下：

          width: 500px;height: 500px;	
	  background: -webkit-linear-gradient(50deg, rgba(255,0,0,0.7) , rgba(0,0,255,0.3)); /* Safari 5.1 - 6.0 */
	  background: -o-linear-gradient(50deg, rgba(255,0,0,0.7) , rgba(0,0,255,0.3)); /* Opera 11.1 - 12.0 */
	  background: -moz-linear-gradient(50deg, rgba(255,0,0,0.7) , rgba(0,0,255,0.3)); /* Firefox 3.6 - 15 */
	  background: linear-gradient(50deg, rgba(255,0,0,0.7) , rgba(0,0,255,0.3)); /* 標準的語法 */

　　效果以下：

　　3.css3還支持重複的線性漸變即repeating-linear-gradient()。

　　4.徑向漸變。

　　爲了建立一個徑向漸變，咱們至少定義兩種顏色結點。同時也能夠指定漸變的中心、形狀（圓形或橢圓形）、大小。默認狀況下，漸變的中心是center，形狀是ellipse，漸變的大小是fasthest-corner（表示最遠的角落）。其中形狀還能夠是circle（圓形）、大小還能夠是choset-side和closest-corner和farthest-side。

　　語法:background: radial-gradient(center, shape size, start-color, ..., last-color);

　　舉例以下：

　5.不只如此，實際上漸變還能夠指定更多的參數，以下所示：

      background: linear-gradient(-45deg,blue 20px,red 0);

　　表示-45度方向的顏色漸變，最開始爲20px（-45度方向），剩下的全是紅色（注意：「剩下的」須要使用0來表示，而不能什麼都不寫）。下面的例子是一個簡單的效果：

第五部分：css3文本效果

　　在css3中包含了下面幾個新的文本特徵：text-shadow、box-shadow、text-overflow、word-wrap、word-break。

　　1.text-shadow。

　　顯然這個屬性即爲給文本添加陰影。值包括水平陰影、垂直陰影、模糊的舉例以及陰影的顏色，和咱們以前講過的box-shadow的方法是相同的。舉例以下：

　　效果以下：

　　效果仍是挺不錯的！

　　2.box-shadow

　　這個屬性在前面是講過的。它接受四個值，第一個是水平移動距離、第二個是豎直移動距離、第三個是模糊的距離、第四個是陰影的顏色。以下所示：

效果以下：

這樣，咱們不須要美工就能夠達到本身想要的效果了。

　實際上，咱們還能夠給box添加多個陰影，以下所示：

獲得的結果以下所示：

也就是說，咱們不只能夠添加多個陰影，還能夠對陰影的顏色使用透明度。

　　3.white-space

　　其屬性值有normal（默認）、pre、nowrap、pre-wrap、pre-line、inherit。

　　這個屬性指定元素內的空白如何處理。其默認值是normal，即空白會被瀏覽器忽略。

在瀏覽器的顯示效果以下：

咱們發現它只是把最前面的空格都去掉了，中間的空格壓縮，但沒有徹底去除。

　　而white-space的屬性值爲pre時，他會保留全部的空格：

　它在保留了全部空格的狀況下且在瀏覽器上這段文字永遠不會換行。

　　而white-space的屬性值是nowrap時，它沒有保留空格，可是不會換行（除非遇到br標籤）：（nowrap即不包裹，即不會換行）

　　當white-space的屬性值是pre-wrap時，會保留空白符序列，可是能夠正常的換行。以下：（pre只不會忽略空格、wrap只要包裹，即換行）效果以下：

　　當white-space的屬性值爲pre-line時，合併空白符序列，可是保留換行符。

　　即合併了空白符，可是能夠換行。

　　4.text-overflow

　　這個屬性表示當文本溢出時指定向用戶如何顯示內容。其屬性值有ellipsis(省略)、clip（裁剪）。注意：這個屬性的使用要配合包含內容的元素的overflow:hidden；屬性。

獲得的效果圖以下：

咱們發現第一段是有省略號表示有文字被遮擋了，而第二段則直接切（clip）掉了。

　　補充，這裏都是單行的省略，可是若是但願多行呢？這是須要用到新的屬性了，代碼以下所示：

        
<!DOCTYPE html>
<html>
<head>
    <title>fortest</title>
    <style>
        h4{
            width: 200px; /*寬度必需要限制*/
            background: red;
            color:white;
            overflow: hidden;
            /*text-overflow: ellipsis; 這行代碼居然也能夠不使用！ */
            display: -webkit-box;
            -webkit-line-clamp:3; /*clamp有夾住、固定住的意思*/
            -webkit-box-orient:vertical;
            text-align: justify; /*這行代碼能夠不使用，可是用了更好，可讓文字對齊，問題在於這時最後的省略號出現了問題*/
        }
    </style>
</head>
<body>
<h4 class="f_card_h4">印軍出動航印軍出動航母大規模演習 媒體稱假想敵爲中國母大規模演習 媒體稱假想敵爲中國印軍出動航母大規模演習 媒體稱假想敵爲中國</h4>
</body>
</html>

　　最終效果以下所示：

　　雖然可使用，可是能夠發現最後的效果並非很好，

　　若是把最後一句text-align:justify;去掉，這時的效果會更好，以下所示，就是沒有文字對齊的效果了。以下所示：

　　5.word-wrap

　　這個屬性容許單詞在很長的時候換行，word-wrap:break-word;

　　舉例以下：

　　效果以下所示：

即咱們發現第一段中那個長單詞自動換行了，而沒有設置word-wrap:break-word的第二個段落會在同一行中把這個單詞顯示徹底。

　　6.word-break

　　這個屬性和上面的屬性做用是相同的，若屬性值爲keep-all則全部的單詞都是完整的，而屬性值是break-all時，全部超出邊界的單詞都會被break。

效果以下：

　　6. letter-spacing

　　這個屬性的值爲px，能夠隨意控制字體之間的間隔。

　　7. text-align:justify

　　這個屬性可讓一行中的字體自動對齊，使得更加美觀。舉例以下，

　　代碼以下：

　　效果以下：

　　顯而後者的排版更加舒服一點。而且不會明顯地看出來字體間距的差別。

　第六部分：字體

　　以前，咱們不得不使用用戶計算機上已經安裝的字體，可是有了css3，咱們就可使用任何咱們喜歡的字體。使用@font-face便可實現。

　　如：

@font-face
{
    font-family:myFont;
    src:url(sansation.woff);
    font-weight:bold;
}

　　更多介紹請看個人另一篇博文《css3之自定義字體》。

　　第七部分：2D轉換

　　這一部分請看個人博文《css3之2D轉換》，那裏對此作了詳盡的介紹。

　　第八部分：3D轉換

　　1.rotateX()方法

　　該方法可使得沿着x軸作空間的旋轉。語法以下：rotateX(80deg);即旋轉80度，但是這個80度是沿着什麼方向呢？下面咱們一探究竟。

　　效果以下:

　　所以若向右爲X軸的正方向，那麼咱們向正方向看去，旋轉是逆時針繞着x正方向進行的。

　　2.rotateY()方法，該方法容許咱們沿着Y軸進行空間旋轉。

　　獲得的效果以下所示：

也就是說，若是咱們認爲向上爲Y軸的正方向，那麼rotateY()是當咱們從Y軸正方向看過去時延着逆時針旋轉的。

3.在3D變換中，既然有x和y方向的旋轉，天然就少不了z方向的旋轉了。舉例以下

效果圖以下所示：

也就是說，若是垂直與屏幕朝向咱們的方向爲Z軸的正方向，那麼旋轉一樣是當咱們看向正方向時逆時針旋轉。

綜上所述，咱們能夠知道XYZ的正方向以下所示，旋轉是看向正方向，沿着逆時針（角度爲正的狀況下）旋轉。

第九部分：css3過渡

　　在css3中，咱們能夠輕鬆的實現從某種效果到另外一種效果，而再也不須要使用Flash或者是JavaScript。這個屬性很是有意思！！！

　　通常狀況下，該屬性即transition必須規定2項內容

指定要添加效果的css屬性（這樣才能識別作哪一個方向的過渡，一般是width、height）
指定效果的持續時間（默認持續時間爲0，因此必需要指定）
實際上，咱們還能夠只設計一個transition-duration的時間，而不須要添加效果的css屬性。

　　注意：該屬性必須結合僞類:hover來使用。

　　下面舉例：

　　注意：這裏我沒有考慮到兼容性的問題，若是在實際開發中，還要考慮不一樣瀏覽器的兼容。效果以下：

注意到:這裏必須配合hover裏存在的各類屬性使用transition屬性。

　　另外咱們還可使用transition-delay屬性，即hover以後，這個過渡的過程在多久以後觸發。

　　第十部分：CSS3動畫

　　使用css3咱們能夠建立動畫，它能夠取代許多網頁動畫圖像，好比Flash動畫和JavaScript。

　　而要建立css3動畫，咱們就不得不使用@keyframes規則。使用該規則即建立動畫，它規定了一個css樣式和動畫將逐步從目前的樣式更新爲新的樣式。

　　使用了@keyframes以後，咱們必須把它綁定到animation選擇器，不然動畫是沒有任何效果的，這個animation選擇器包含至少兩個屬性：

動畫的名稱，即由@keyframes規定的名稱
動畫的總時長，即動畫完成須要的時間

　　下面列舉兩個簡單的例子。

　　例1：

好比一個div的css以下：

效果以下：

在這個例子中，我在@keyframes中使用的是from（最開始的狀態）和to(最終狀態)。

實際上還可使用百分數來表示：好比0%爲剛開始，等同於上面的from，100%爲結束，至關於上面的to，固然咱們還能夠設置20%,35%等等各類你想要設置的數字。下面舉例以下：

例2：

這裏考慮了兼容性，因此代碼顯得較多。

效果以下:

　　第十一部分：css3多列

　　css3能夠將文本內容設計成像報紙同樣的多列布局。

　　多列中主要有這樣幾個屬性：

column-count 這個屬性指定了須要分隔的列數。如column-count=3就會將一個div的內容分爲3列。
column-gap 這個屬性指定了列與列之間的間隙。如column-gap=20px;那麼相鄰兩列之間的舉例就是20px。
column-rule 這個屬性指定了兩列之間的垂直線的顏色寬度形狀，如：column-rule: 1px solid red;那麼兩列之間的分隔線爲1px，類型是solid，顏色爲紅色。
column-span 這個屬性指定了內容上面的標題跨的行數,默認值爲1，還能夠是all，即跨越全部行。
column-width 這個屬性指定了每一列的寬度，使用了這個屬性，就不能再使用column-count屬性了。

　　下面經過兩個例子來應用這幾個屬性。

　例1：

因而能夠獲得下面的效果：

因而咱們能夠看到標題h2跨越了全部行，content分爲3列，其中gap爲20px；

例2：基於上面的例子，咱們把column-span：all;去掉，即爲默認的column-span:1；而且不使用column-count，而是使用column-width:150px;(這樣會隨着瀏覽器的寬度自動分類，僅保持寬度不變)效果以下：

這樣，標題部分處於第一列。並根據瀏覽器的寬度自適應爲4列。

　　第十二部分：css3用戶界面

　　在css3中新增了一些新的用戶界面特性來調整元素尺寸（由用戶調整！），框尺寸和外邊框。

　　1.resize屬性能夠指定一個元素是否應該由用戶來調整大小。

　　即resize:both;可是該屬性必須配合overflow:hidden;才能正常使用。代碼以下：

效果以下所示：

（說明：軟件的問題致使顯示錯誤，鼠標應當拖住右下角）

2.box-sizing

　　該屬性能夠是咱們以確切的方式定義適應某個區域的具體內容。

3.outline-offset

　　該屬性能夠對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

第十三部分：css圖片

　　咱們能夠給一張img來添加border-radius屬性，能夠添加border屬性，能夠添加padding屬性（注意：img是行內元素，可是也能夠添加padding屬性）。咱們還能夠製做響應式圖片。而且能夠在圖片上添加文本。以及圖片濾鏡。和響應式圖片相冊。圖片模態也是新增的內容。

　　1.這一部分我會給出一個例子來使用到border-radius屬性、border屬性、padding屬性以及box-shadow屬性。例子的代碼以下：

　　具體效果以下：

2.響應式圖片

　　什麼是響應式圖片呢？實際上很簡單，就是它能夠自動適配各類尺寸的屏幕。主要用到的代碼就是max-width:100%;height:auto;其中max-width:100%;是指圖片的寬度爲父元素的100%;而height:auto;是爲了讓其高度隨着寬度的改變而改變，這樣能夠保證其等比例放大或縮小。下面咱們經過一個例子來理解。

　　代碼以下所示：

最終的效果圖以下所示：

因而咱們能夠看到，當瀏覽器的寬度在改變是，圖片的寬度會始終保持和瀏覽器相同的寬度，同時，高度也在不斷地改變，使得圖片的比例協調。這就是所謂的響應式圖片。

3.圖片濾鏡

　　以前咱們可能用過filter:opacity(70%);可是，其實在css3中還有更多的濾鏡效果。（補充：opacity:0.5;這種形式是用來是IE生效的。由於IE不支持如此強大的filter）

blur 單位:px 給圖像設置高斯模糊，若是未設置，則默認爲0，不接受百分比值
brightness 單位：% 給圖片應用一種線性乘法，使其看起來更亮或者更暗，若是值爲0%，圖像會全黑。值超過100%也是能夠的。默認爲1
contrast 單位% 調整圖像的對比度值是0的話，圖像會全黑。100%則表示不變。超過100%意味着運用更低的對比
grayscale 單位% 將圖像轉化爲灰度圖像。100%則徹底轉化爲灰度圖像，值爲0則無變化。
hue-rotate 單位deg 給圖像應用色相旋轉。angle設定圖像會被調整的色環角度值。默認爲0.超過360說明又繞了一圈。
invert 單位% 反轉輸入圖像。值定義轉換的比例，100%爲徹底反轉，0%表示無變化。在0到100%之間則是效果的線性乘子。
opacity 單位% 轉化圖像的透明程度。0%表示徹底透明，100%表示圖像無變化。故準確的說應該是不透明度。在0到100%之間是效果的線性乘子。該函數和已有的opacity:0.5;這個屬性類似，不一樣之處在於經過了filter，一些瀏覽器爲了提高性能會提供硬件加速。
saturate 單位% 即飽和度
sepia 單位% 將圖像轉換爲深褐色
url（）它接受一個XML文件

下面舉例以下：

效果以下所示：

４．圖片模態（Ｍｏｄａｌ）

　　首先咱們須要使用ｃｓｓ來建立modal窗口（對話框），默認是隱藏的。

　　而後，咱們使用JavaScript來顯示模態窗口，當咱們點擊圖片時，圖片會在彈出的窗口中顯示。

第十四部分：css按鈕

　　製做按鈕的方式不少，能夠經過button建立按鈕，能夠經過a建立一個連接按鈕，能夠經過input的type=「button」建立一個表單按鈕等等。下面舉例來講明：

　代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>製做按鈕</title> 
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS 按鈕</h2>

<button>默認按鈕</button>
<a href="#" class="button">連接按鈕</a>
<button class="button">按鈕</button>
<input type="button" class="button" value="輸入框按鈕">

</body>
</html>

　　效果圖以下所示：

這裏經過ｃｓｓ中的一個類就設置了一樣的幾個按鈕，這裏咱們注意到：

border:none;把其自己自帶的邊框去掉（不夠美觀），通常咱們還須要使用outline:none;由於在點擊的時候會出笑outline，不夠美觀。
將其display設置位inline-block，這樣咱們就能夠放心的設置padding和margin了。
不用設置按鈕的寬度和高度，咱們能夠經過padding來把整個按鈕來撐開，同時還達到了居中的目的。
cursor:pointer;這個簡單的屬性卻能夠是咱們的按鈕更加人性化，更加美觀。

重要：除此以外，咱們能夠在按鈕被劃過期設置opacity:0.5;這樣的透明度屬性，看起來會更舒服。

鼠標懸停按鈕：

　　咱們可使用:hover選擇器來修改鼠標懸停在按鈕上的樣式。

咱們可使用transition-duration屬性來設置hover效果的速度。

好比下面的例子：

效果以下所示：

對於按鈕，咱們還能夠經過:hover以後設置其box-shadow，這樣的效果會更好一些。

禁用按鈕這個功能很特別，下面舉例說明：

效果圖以下：

即在禁用按鈕上，我添加了一個cursor:not-allowed;並設置了一個透明度。

第十五部分：css框大小（box-sizing）

　　css3中的box-sizing屬性能夠設置width和height屬性中包含了padding和border。

　　不使用css3 box-sizing屬性時，默認狀況下，元素的寬度和高度計算方式以下：

　　width+padding+border=元素實際寬度

　　height+padding+border=元素實際高度　　

　　這意味着對於兩個width和height相同的元素，若是padding和border的大小不一樣時，獲得的兩個元素的大小也是不一樣的。以下：

效果圖以下所示：

可是若是使用了css3中的box-sizing屬性，那麼這個屬性中的width和height就包含了padding和margin。看下面的例子。

效果圖以下所示：

即咱們發現雖然第二個div設置了padding，可是二者的大小仍是同樣的，這即是border-box的好處了。

補充：box-sizing有三個值，content-box即爲標準的咱們一直使用的盒模型。border-box即爲width和height包括了padding和margin的盒模型（IE盒模型就是如此）。

實際上咱們推薦全部元素都使用box-sizing的：即*{box-sizing:border-box;}

第十六部分：css3彈性盒子（Flex Box）

　　將屬性display:flex;設置在彈性容器中，那麼這個容器就是一個彈性盒子了，其內部的元素就會根據狀況排列（默認狀況下是從左到右緊挨着排列）。

　　咱們能夠設置flex-direction來對彈性盒子內部的彈性子元素的排列順序進行設置。如：

row 從左到右橫向排列
row-reverse 從右到左橫向排列
column 從上到下縱向排列
column-reverse 從下到上縱向排列

　　咱們還能夠設置justify-content屬性設置水平方向的對齊方式：

flex-start 緊挨着最左邊
flex-end 緊挨着最右邊
center 彈性項目緊挨着居中
space-between 兩邊的彈性子元素緊挨着兩邊，中間的其餘子元素依次排開
space-around 兩邊的彈性子元素舉例兩邊的舉例爲中間兩個子元素舉例的一半，而中間的元素一次排開。

　　咱們還能夠設置align-items屬性來設置豎直方向的對齊方式。

stretch 該屬性爲默認的，若子元素沒有設置高度，那麼該屬性會將子元素拉伸居中。
flex-start 該屬性使用後會使得子元素緊挨着起始位置的一方
flex-end 該屬性使用後會使得子元素緊挨着起始位置的反方向。
center 該屬性使用後使得子元素在豎直方向上居中
baseline 該屬性使的其與基線對齊

　　***flex-wrap屬性

　　該屬性能夠指定彈性子元素的換行方式

nowrap 該屬性爲默認的，即彈性容器爲單行。若是彈性子項過多則會溢出或者將子元素的寬度壓縮
wrap 當子元素過多時會自動換到下一行
wrap-reverse 會反轉wrap的排列

　　***align-content屬性

　　該屬性用於修改flex-wrap屬性的行爲，相似於align-items，可是它不是設置彈性子元素的對其，而是設置各個行的對其。

strech 默認屬性。使得各行伸展後佔用剩餘的空間
flex-start 各行向彈性盒容器的起始位置堆疊
flex-end 各行向彈性盒容器的結束位置堆疊
center 各行向中間位置堆疊
space-between 各行在彈性盒容器中平均分佈
space-around 各行在彈性盒容器中國平均分佈，可是兩端保留子元素與子元素之間間距大小的一半。

***order

　　　該屬性與上述屬性不一樣，這個屬性應當設置在子元素的css中，其數值爲一個數字，數字越大，則排列順序越靠後；數字越小，則排列順序越靠前。

　　***margin:auto;實現完美的居中

　　使用彈性盒子，居中變得很簡單，只要在子元素（子元素在彈性容器中應當是惟一的）中設置margin:auto;便可。這樣就能夠水平和豎直居中了。

　　***align-self

　　該屬性能夠設置彈性子元素自身在側軸（縱軸）方向上的對其方式。

auto 這樣子元素的位置要依靠父元素的align-items值
flex-start 緊挨着起始邊界
flex-end 緊挨着結束邊界
center 居中
baseline 與基線對齊
strech 拉伸

　　下面看這樣一個例子：

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>

　　效果以下：

　　***flex

　　該元素指定了彈性子元素如何分配空間

　　如：

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

因而效果以下所示：

　第十七部分：css3選擇器

　　　css3中增添了很是多實用的選擇器，博友寫的一遍文章總結的不錯，這一部份內容能夠參考他的文章。

　第十八部分：媒體查詢

　　媒體查詢能夠作不少事情，例如：

viewport（視窗）的寬度和高度
設備的寬度和高度
朝向（智能手機橫屏仍是豎屏）
分辨率

　　目前不少針對蘋果手機、android手機、平板都會用到媒體查詢。

　　媒體查詢能夠包含一個或者多個表達式，表達式根據條件是否成立返回true或false

　　若是指定的多媒體類型匹配設備類型則查詢結構返回true，文檔會在匹配的設備上顯示指定樣式效果。除非你使用了not或者only操做符，不然全部的樣式都會適應在全部設備上顯示效果。

not用於去掉某些設備，如@media not print（非打印設備）
only用來指定某種特別的媒體類型
all 全部設備

　　css3多媒體類型有如下幾種

all 用於全部的多媒體類型設備
print 用於打印機
screen 用於電腦屏幕平板智能手機等
speech 用於屏幕閱讀器

　　下面是一個媒體查詢的實例。

效果以下：

　　下面咱們舉一些例子來更詳盡地說明這個問題：

　　1. 當屏幕寬度小於920px時，則執行相應的css代碼，以下所示：　　

@media screen and (max-width:920px){
    body{
        background-color: red;
    }
}

　很容易理解，即當媒體是screen(而不是打印等設備時)、而且寬度最大爲920px，就執行下面的語句。。。。。

　 2.當知足屏幕最小寬度爲920px時，則執行相應的css代碼，以下所示：

　　（三個關鍵字：1.知足：必定是在知足條件的條件下再執行相應的語句 2.最小：即從左往右讀，min即爲最小的意思 3.寬度：即說的是寬度而不是高度）

@media screen and (min-width:920px){
    body{
        background-color: red;
    }
}

　　一樣地，當媒體時screen，而且在寬度最小爲920px的狀況下，就執行代碼塊中的下面語句。

　　上面所說的狀況是指pc版本的狀況，下面的則是經過移動版本

　　3.當最小設備寬度爲920px時，就執行下面的css代碼，以下：

@media screen and (min-device-width:920px){
    body{
        background-color: red;
    }
}

　　4.當最大設備寬度爲920px時，就執行下面的css代碼，以下：

@media screen and (max-device-width:920px){
    body{
        background-color: red;
    }
}

　　一樣必定要記住知足這個關鍵詞。

　更多例子點擊這裏，其實媒體查詢比你想象的還要強大！

靜下心來，不要浮躁，什麼事情都不是一蹴而就的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。