文本
text-overflow
- clip 隱藏超出文本
- ellipsis 超出部分使用省略號
對于省略號 還需要配合其他屬性進行使用
.panel {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
超出部分使用省略號的方法：設置不換行，超出部分隱藏，最后設置使用省略號才能達到效果。
文本換行
word-wrap
允許長單詞或url地址換行到下一行
- normal 只在允許的斷字點換行
- break-word 在長單詞或url地址內部進行換行
word-break
規(guī)定自動換行的處理方法
- normal 使用瀏覽器默認的換行規(guī)則
- break-all 允許在單詞內換行
- keep-all 只能在半角空格或連字符處換行
white-space
設置如何處理元素內的空白
- normal 連續(xù)空白會被忽略
- pre 空白會被瀏覽器保留，其行為類似html中的標簽
- nowrap 文本不會換行，文本會在同一行上繼續(xù)，直到遇到標簽為止
- pre-wrap 保留空白符序列，但是正常的進行換行
- pre-line 合并空白符序列，但是保留換行符
- inherit 規(guī)定從父元素繼承屬性值
text-shadow
text-shadow: 顏色(color) x軸(X offset) y軸(Y offset) 模糊半徑(blur)
text-shadow: x軸(X offset) y軸(Y offset) 模糊半徑(blur) 顏色(color)
和box-shadow很像
可以設置偏移，顏色，陰影大小
text-shadow: 2px 2px 3px #333;
多個樣式可以,隔開
結合背景顏色，通過偏移負距離，做出多種效果
border
border-radius
通過border-radius設置元素的圓角半徑
border-radius: 5px;
對于正方形，border-radius設置為邊長的50% ，就可以變?yōu)閳A形
border-image
可以使用圖片作為邊框的修飾
box-shadow
box-shadow: inset x-offset y-offset blur-radius spread-radius color
多個樣式的使用用,隔開
box-sizing
改變盒模型
- content-box 標準盒模型
- border-box
background
background-size
規(guī)定背景圖片的尺寸，如果是百分比 那么尺寸相對于父元素的寬度和高度
- length: 設置背景圖像的高度和寬度，第一個值為寬度，第二個為高度，如果只設置一個，第二個值會被設為auto
- percentage: 以父元素的百分比來設置背景圖像的寬度和高度，第一個值為寬度，第二個為高度，如果只設置一個，第二個值會被設為auto
- cover: 把背景圖像擴展到足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
- contain: 把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區(qū)域。
.box {
width: 180px;
height: 120px;
border: 1px solid red;
background: url("https://unsplash.it/200/300/?random") 0 0 no-repeat;
/*控制圖片展示的大小*/
/*background-size: 180px 120px;*/
/*background-size: contain;*/
/*background-size: cover;*/
}
如果想讓box全屏 可以這么設置：
html,body {
height: 100%;
}
.box {
margin: 0;
/*不設置寬度*/
height: 100%;
/*設置height為100% 沒效果 要設置父容器也是100%height，即body html都要設置*/
background: url("https://unsplash.it/400/600/?random") center center no-repeat;
background-size: cover;
}
background-origin
規(guī)定background-position屬性相對于什么位置來定位
- padding-box 相對于內邊距來定位
- border-box 相對于邊框盒
- content-box 相對于內容框來定位
如果background-attachment 屬性為fixed 則該屬性沒有效果
background-clip
規(guī)定背景的繪制區(qū)域
- padding-box 背景被裁剪到內邊距
- border-box 背景被裁剪到邊框盒
- content-box 背景被裁剪到內容框
多背景
css3可以使用多張背景圖片
background: url("haoroomCSS1_s.jpg") 0 0 no-repeat,
url("haoroomCSS2_s.jpg") 200px 0 no-repeat,
url("haoroom.jpg") 400px 201px no-repeat;
Gradient
CSS3漸變分為 liner-gradient 和 radial-gradient
其語法由于每個瀏覽器都有不同的實現(xiàn)，介紹2012.04w3c推薦標準語法
線性漸變 liner-gradient
在線性漸變過程中，顏色沿著一條直線過度，從左到右，從右到左，從頂?shù)降祝瑥牡椎巾敾蛘哐刂魏屋S
linear-gradient([[<angle> | to <side-or-conrner>],]?<color-stop>[,<color-stop>]+)
W3C標準線性漸變語法包括3個重要屬性參數(shù)：
第一個參數(shù)指定了漸變的方向，同時決定了漸變顏色的停止位置。這個參數(shù)值可以省略，當省略不寫的時候其取值為to bottom
在決定漸變的方向主要有2種方法：
- angle：通過角度來確定漸變的方向，0度表示漸變方向從下往上，90度表示漸變方向從左到右，如果取值為下值，其角度按順時針方向旋轉。
- 關鍵詞： 通過關鍵詞來確定漸變的方向。比如 to top, to right,to bottom, to left.
這些關鍵詞對應的角度值，除了使用to top, top left之外，還可以使用top left左上角到右下角，top right左上角到右下角等。
第二個參數(shù)和第三個參數(shù)，表示顏色的起始點和結束點。可以在插入多個顏色值。
水平和垂直漸變舉例：
width: 200px;
height: 50px;
/*background: linear-gradient(red,blue); 默認從上到下 和to bottom一樣*/
/*background: linear-gradient(to right,red,blue); 從左到右*/
/*background: linear-gradient(to right,red,blue,yellow,green);可以有多個顏色*/
對角的線性漸變 指定水平和垂直的起始位置來制作對角漸變:
/*左上到右下 to bottom 改為 to bottom right*/
background: linear-gradient(to bottom right, red,blue);
使用角度
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。
background: linear-gradient(180deg, red, blue);
徑向漸變 radial-gradient
是圓形或者橢圓形漸變，顏色不再沿著一條直線軸變化，而是從一個起點朝所有方向混合。
radial-gradient([[<shape> || <size>] [at <position>]?, | at <position>,]?<color-stop>[,<color-stop>]+);
過渡和動畫
過渡
在 CSS3引入 transition之前沒有時間軸，所有的狀態(tài)變化都是瞬間完成的。
transition的作用在于，指定狀態(tài)變化所需要的時間
transition: all 1s;
另外transition 一般加在元素本體上，而不是偽類上，雖然加到偽類上也能用，但是多個偽類狀態(tài)的時候，只需要在本體上寫一個transition就可以了
指定屬性
如果不想寫all 想針對特定的屬性進行過渡的動畫變化，例如針對height屬性，可以寫成
transition: 1s height;
這樣的話，只有height是過渡的，其他屬性比如寬度還是瞬間完成的。
另外同一行transition中，可以分別制定多個屬性
transition: 1s height,1s width;
delay
對于上面的例子transition: 1s height,1s width;,height和width的變化是同時進行的。如果我們希望height先發(fā)生變化，然后width再發(fā)生變化。就可以為width指定一個delay參數(shù)：
transition: 1s height,1s 1s width;
上面代碼指定，width在1s之后，再開始變化
delay的意義在于它指定了動畫發(fā)生的順序，使得多個不同的transition可以連在一起，形成復雜的效果。
transition-timing-function
緩動函數(shù)，狀態(tài)變化速度，默認不是勻速的，而是逐漸放慢，叫做ease；
transition: 1s ease;
除了ease還有：
- linear： 勻速；
- ease-in： 加速；
- ease-out：減速；
- cubic-bezier函數(shù)： 自定義速度演示,例如：
transition: 1s height cubic-bezier(.83,.97.05,1.44);
目前，包括IE10在內的各大瀏覽器都已經支持無前綴的transition
transition需要明確的知道，開始的狀態(tài)和結束的狀態(tài)的具體數(shù)值，才能計算出中間狀態(tài)，什么none到block之類的是不行的
transition是一次性的，不能重復發(fā)生，除非一再觸發(fā)
animation
transition比較簡單，animation可以實現(xiàn)復雜的動畫，使用animation我們需要定義動畫過程，也就是關鍵幀
定義一個動畫 rainbow：
@keyframes rainbow {
0% {background: #c00;}
50% {background: orange;}
100% {background: yellowgreen;}
}
使用@keyframes 定義動畫，上述rainbow分為3個狀態(tài)，值是每個狀態(tài)下的屬性值，如果有需要還可以插入更多狀態(tài)。
定義好關鍵幀之后，就可以給DOM元素綁定動畫了，類似于事件：
.box1:hover {
animation: 1s rainbow;
}
當hover時，會進行動畫效果，默認只播放一次，加入infinite關鍵字，可以讓動畫無限次播放。
.box1:hover {
animation: 1s rainbow infinite;
}
也可以指定具體循環(huán)的次數(shù)，比如說循環(huán)3次:
.box1:hover {
animation: 1s rainbow 3;
}
animation-fill-mode
動畫結束后會立即從結束跳回起始狀態(tài)。如果想讓動畫保持在結束狀態(tài)，需要使用animation-fill-mode屬性：
.box1:hover {
animation: 1s rainbow forwards;
}
有如下屬性值：
- none 默認 回到動畫沒開始的狀態(tài)
- forwards: 讓動畫停留在結束狀態(tài)
- backwards： 讓動畫回到第一幀
- both： 根據(jù)animation-direction輪流應用forwards和backwards
animation-direction
動畫循環(huán)播放時，每次都是從結束狀態(tài)跳回到起始狀態(tài)，再開始播放。animation-direction屬性，可以改變這種行為。
比如說可以讓動畫從100%到0%開始播放
另外還有取值為：
- alternate
- reverse
- alternate-reverse
等值，最常用的就是normal和reverse，其他屬性瀏覽器兼容不佳，慎用。
語法
同transition一樣，animation也是一個簡寫形式
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
這是一個簡寫形式，可以分解成各個單獨的屬性
div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
@keyframes關鍵字用來定義動畫的各個狀態(tài)，它的寫法相當自由：
@keyframes rainbow {
0% {background: #c00;}
50% {background: orange;}
100% {background: yellowgreen;}
}
其中0%可以用from代表，100%可以用to代表，所以也可以寫成：
@keyframes rainbow {
from {background: #c00;}
50% {background: orange;}
to {background: yellowgreen;}
}
如果省略某個狀態(tài)，瀏覽器會自動推算中間狀態(tài)，所以下面都是合法的寫法。
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
甚至，可以把多個狀態(tài)寫在一行。
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
另外一點需要注意的是，瀏覽器從一個狀態(tài)向另一個狀態(tài)過渡，是平滑過渡。steps函數(shù)可以實現(xiàn)分步過渡。
div:hover {
animation: 1s rainbow infinite steps(10);
}
animation-play-state
有時，動畫播放過程中，會突然停止。這時，默認行為是跳回到動畫的開始狀態(tài)，如果想讓動畫保持突然終止時的狀態(tài)，就要使用animation-play-state屬性。
比如說頁面上有個滾動的div,一直在循環(huán)滾動，hover時設置停止，那么就可以設置為
<style>
@keyframes scroll {
from {left: 0;}
to {left: 100%;}
}
.box1 {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
animation-play-state: running;
animation: 10s scroll infinite;
}
.box1:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box1">我在滾動，hover我就停下來了</div>
注意animation-play-state的用法，hover時停下來，所以hover時設置paused.
變形
CSS3中可以通過transform屬性修改元素的變形、旋轉、縮放、傾斜特性，在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix
transform ： none | <transform-function> [ <transform-function> ]*
transform中使用多個屬性時卻需要有空格隔開，可用于內聯(lián)(inline)元素和塊級(block)元素
旋轉 rotate
可以通過rotate使元素旋轉一定的度數(shù)
transform:rotate(30deg);
旋轉是順時針的
旋轉之后元素仍占據(jù)原來位置，實際上所有的transform都是這樣，縮放、位移等都不會改變元素占據(jù)的位置
元素旋轉的的基點默認是中心，可以通過transform-origin屬性改變
transform:rotate(30deg); transform-origin: 0% 0%;
transform-origin的取值可以是:
- top, bottom, left, right, center
- 百分數(shù)
transform-origin屬性對下面介紹的transform都有作用
位移
可以通過translate使元素平移
transform:translate(x,y);
transform:translate(200px,150px);
也可以簡單只移動一個坐標
transform:translateX(100px);
transform:translateY(100px);
translate可以寫成百分比，在絕對居中寫負margin的時候可以寫成-50%,-50%,即 transform: translate(-50%,-50%)
縮放
可以通過scale使元素縮放一定的比例，和translate類似，也有三個方法
- scale(x,y)：使元素水平方向和垂直方向同時縮放
- scaleX(x)：元素僅水平方向縮放
- scaleY(y)：元素僅垂直方向縮放
對于scale只設置一個參數(shù)，一相同的比例縮放兩個方向
transform:scale(2, 0.5);
transform:scaleY(0.3);
transform:scaleY(2);
transform:scale(3);
扭曲
可以通過skew使元素扭曲一定的度數(shù)，和上面一樣也有三中類似的用法
transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);
矩陣
matrix(<number>, <number>, <number>, <number>, <number>, <number>)
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。
就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學中的矩陣，可以參考css3-transform-matrix-矩陣
3D
CSS3帶來了DOM的3D效果，元素需要設置需要設置perspective來激活3D效果，可以通過兩種方式實現(xiàn)
在transform屬性中使用perspective方法
transform: perspective( 600px );直接使用perspective屬性
perspective: 600px;
perspective屬性的值決定了3D效果的強烈程度，可以認為是觀察者到頁面的距離。值越大距離越遠，視覺上的3D效果就會相應的減弱。perspective: 2000px; 會產生一個好像我們使用望遠鏡看遠方物體的3D效果，perspective: 100px;會產生一個小昆蟲看大象的效果。
看個例子
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 40px;
}
.box {
width: 100%;
height: 100%;
}
#red1 .box {
background-color: red;
transform: perspective( 600px ) rotateY( 45deg );
}
</style>
<section id="red1" class="container">
<div class="box red"></div>
</section>
<style>
#blue1{
perspective: 600px;
}
#blue1 .box {
background-color: blue;
transform: rotateY( 45deg );
}
</style>
<section id="blue1" class="container">
<div class="box blue1"></div>
</section>
這兩種方式都會觸發(fā)3D效果，但是有一點不同：第一種方式直接在一個元素上觸發(fā)3D變形，但是當多個元素的時候變形效果和預期會有所不同，如果使用同樣的方法作用于不同位置的元素的時候，每個元素會有自己的軸心，為了解決這個問題，需要在父元素使用perspective屬性，這樣每個子元素都共享相同的3D空間
3D變形方法
作為一個web者，可能很熟悉兩個方向：X & Y，表示元素的水平方向和垂直方向，在perspective激活的3D空間中我們可以在X、Y、Z三個坐標軸上對元素進行變形處理。3D變形使用的變形方法和2D變形一樣，如果熟悉2D變形方法很容易掌握3D變形.
rotateX( angle )
rotateY( angle )
rotateZ( angle )
translateZ( tz )
scaleZ( sz )
translateX()方法使元素延X軸移動，translateZ()使元素延Z軸（在3D空間中方向從前到后）移動。正值使元素離觀察者更近，負值使元素變遠。
