常用CSS3屬性整理，css3屬性

常用CSS3屬性整理，css3屬性
常用CSS3屬性整理文本文本超出部分摺疊

white-space:nowarp;overflow:hidden;text-overflow:ellipsis

word-warp

邊界換行

• normal 預設
• break-word 內容將在邊界內換行，僅用於塊對象，內聯對象要用的話，必須要設定height、width或display:block或position:absolute。

word-break:

處理單詞折斷

• normal 使用瀏覽器預設的換行規則。
• break-all 允許在單詞內換行
• keep-all 只能在半形空格或連字號處換行

white-space

white-space 屬性設定如何處理元素內的空白(空格)

• normal 預設。連續空白會被瀏覽器忽略
• pre 連續空白會被瀏覽器保留(保留原文本空白，分行符號)
• nowrap 文本不會換行，直到遇到標籤
• pre-wrap 保留原文本空白，但正常換行
• pre-line 合并連續空白，打算保留分行符號
• inherit 繼承自父元素

text-shadow

文本陰影

text-shadow: x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)

可以寫多個，,隔開

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;</br></br>

邊框border-radius

• 圓角半徑值border-radius:5px
• 角收縮率border-radius:50%//標準圓
• 按對角設定border-radius:5px(主對角線) 25px(次對角線);
• 逐一設定border-radius:10px 20px 30px 40px(從左上起順時針);

border-image

source

border-image-source:url(image url);

width

border-image-width: 1;

repeat

三種repeat方式stretch 壓縮或伸展border-image的背景圖片以其剛好適應border-width的寬度repeat 簡單的重複round 壓縮或伸展border-image的背景圖片以圖片最小單元剛好適應border-width的寬度，在此基礎上重複

outset
邊框映像地區超出邊框的量,值為border-image-width的倍數

邊框圖片設定生存器
http://border-image.com/

boxbox-shadow

box-shadow:inset x-offset y-offset blur-radius spread-radius color

• 陰影類型：此參數是一個可選值，如果不設值，其預設的投影方式是外陰影；如果取其唯一值inset,就是將外陰影變成內陰影

• X-offset:是指陰影水平位移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊

• Y-offset:是指陰影的垂直位移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部

• 陰影模糊半徑：此參數是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊

• 陰影擴充半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小

陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣

box-sizing

box-sizing可以改變盒模型

• content-box：標準盒模型
  width = content width
• border-box：IE盒模型
  width = content width + paddingLeft + borderLeft + paddingRight + borderRight

background多背景

通過逗號間隔，圖片位移，可以設定多背景

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,         url("haorooms.jpg") 400px 201px no-repeat;

background-size

• length:設定背景映像的高度和寬度，第一個值設定寬度，第二個值設定高度，如果只設定一個值，則第二個值會被設定為auto
• percentage: 以父元素的百分比來設定背景映像的寬度和高度。第一個值設定寬度，第二個值設定高度，如果只設定一個值，則第二個值會被設定為auto
• contain 縮放背景圖片以完全裝入背景區，可能背景區部分空白。
• cover 縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。

background-origin

位移參考對象

• padding-box
• border-box
• content-box

background-clip

規定背景的繪製地區

• padding-box
• border-box
• content-box
  </br>
  </br>

漸層線性漸層

linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )<side-or-corner> = [left | right] || [top | bottom]<color-stop>     = <color> [ <percentage> | <length> ]//新顏色出現的位置

簡單地可以概括為設定漸層軸位置，設定顏色及在軸上的位置

放射狀漸層

radial-gradient(  [ [ circle || <length> ]                         [ at <position> ]? , |    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |    at <position> ,  ]?  <color-stop> [ , <color-stop> ]+)where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side  and <color-stop>     = <color> [ <percentage> | <length> ]? 

通過規定圖形形狀及其中心位置、顏色節點就可以完成一個基礎的輻射。參數中，圖形相關的參數按順序以空格間隔，顏色節點用逗號間隔。
放射狀漸層產生器http://www.colorzilla.com/gradient-editor/
</br>
</br>

過渡與動畫過渡

<single-transition> = [ none | <single-transition-property> ] || <duration time> || <single-transition-timing-function> || <delay time><single-transition-property> = all | <custom-ident><single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )

變化曲線
ease 激進到漸緩
linear 線性
ease-in 緩進到線性
ease-out 線性到緩出
step-start 等同於 steps(10,start) 動畫分成10步，動畫執行時為開始左側端點的部分為開始。
step-end 等同於 steps(10,end) 動畫分成10步，動畫執行時以結尾端點為開始，預設值為 end。
ease-in-out 緩進到線性到緩出
cubic-bezier 自訂貝茲路徑

自訂貝茲路徑產生器 http://cubic-bezier.com/

動畫

<single-animation>#where <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]where <single-timing-function> = <single-transition-timing-function><single-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )

定義動畫

@keyframs keyname{}//設定主要畫面格  0% { background: #c00; }  50% { background: orange; }  100% { background: yellowgreen; }}div{  animation: 1s keyname infinite;//時間 動畫名 次數}

animation-fill-mode

動畫結束以後，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。
none：預設值，回到動畫沒開始時的狀態
forwards：讓動畫停留在結束狀態
backwards：讓動畫回到第一幀的狀態
both: 根據animation-direction輪流應用forwards和backwards規則

animation-direction

動畫迴圈播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，可以改變這種行為
normal
alternate 迴圈往複
reverse 顛倒運動方向
alternate-reverse

變形及3D

transform

transform-origin

改變旋轉中心

transform:translate()

平移
translateX()，translateY()可以改變特定軸

transform:scale()

縮放
scaleX()、scaleY()

transform:skew()

transform:skewX(10deg)、transform:skewY(10deg
傾斜

perspective

視距，越大3D效果越不明顯
變形、動畫工具：http://isux.tencent.com/css3/tools.html

perspective origin

焦點

來源：https://www.jianshu.com/p/72d100146c9c