技術標籤：筆記css3

目錄

• 邊框
• 背景
• 文字
• 字型
• 2D轉換
• 3D轉換
• 過渡
• 動畫
• 多列
• 漸變

邊框

1.圓角
border-radius：指定每個圓角
四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
三個值：第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
兩個值：第一個值為左上角與右下角，第二個值為右上角與左下角
一個值：四個圓角值相同
2.盒陰影
box-shadow：offset-x陰影的水平偏移量；offset-y陰影的垂直偏移量;blur-radius模糊距離；spread-radius陰影尺寸；顏色。

div{
	box-shadow
 
: 0 10px 20px 10px rgba(0,0,0,0.19), 0 6px 6px 6px rgba(0,0,0,0.23);
}

背景

background-origin：指定背景區域。
content-box, padding-box,和 border-box區域內可以放置背景影象。

多重背景
用逗號隔開的每組值，background-color 只能設定一個。

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

文字

1.文字陰影
text-shadow：水平陰影，垂直陰影，模糊的距離，以及陰影的顏色

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

2.文字溢位
text-overflow:ellipsis 顯示省略符號來代表被修剪的文字。

字型

1.定義字型

@font-face{
	font-family: myFirstFont;/*定義字型名字*/
    src: url(sansation_light.woff);/*填入字型檔案*/
}

2.字型屬性

3.大小寫
text-transform：lowercase全小寫 uppercase全大寫capitalize首字母大寫initial預設樣式

2D轉換

div{
	-webkit-transform:translate(50px,50px);/*平移*/
					  rotate(30deg);/*順時針旋轉，負值相反*/
					  scale(2,4);/*伸縮*/
					  skew(30deg,20deg);/*翻轉*/
}

以上屬性均可如此translateX(50px);單獨將X，Y軸改變。

3D轉換

※座標系：左手系※

div{
	-webkit-transform:rotateX();/*圍繞給定度數的X軸旋轉（向螢幕裡前後旋轉）*/		
					  rotateY();/*圍繞給定度數的Y軸旋轉（向螢幕裡左右旋轉）*/
					  rotateZ()/*圍繞給定度數的Z軸旋轉（在螢幕平面旋轉）*/
	}

backface-visibility:hidden/visible;：定義當元素背面向螢幕時是否可見。
perstective：屬性設定鏡頭到元素平面的距離。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，鏡頭距離元素表面的位置是300畫素。（近大遠小）
perspective-origin：規定了鏡頭在平面上的位置。預設是放在元素的中心。

過渡

1.過渡兩項內容

• 規定您希望把效果新增到哪個 CSS 屬性上
• 規定時長

2.如何實現
在原塊上新增transition: width 2s;來定義過渡屬性和時間，並定義新塊div:hover來使滑鼠懸停後其要展示的過渡後的效果（其他操作同CSS連結）。要新增多個樣式的變換效果，新增的屬性由逗號分隔。
transition-timing-function屬性指定切換效果的速度。
transition-delay屬性指定何時將開始切換效果。

動畫

@-webkit-keyframes定義動畫名字和樣式。0%-100%自定時長樣式。

@-webkit-keyframes myfirst 
{
    from {background: red;}
    to {background: yellow;}
}

animation：引用動畫，並加上時長。
animation-iteration-count：規定動畫播放次數infinite無限次播放。
animation-timing-function：指定動畫將如何完成一個週期。linear動畫從頭到尾的速度是相同的。ease預設。動畫以低速開始，然後加快，在結束前變慢。

多列

-webkit-column-count屬性指定了需要分割的列數。（建立多列）
column-gap屬性指定了列與列間的間隙。
column-rule 屬性
column-rule:1px solid lightblue;
column-rule-width 屬性指定了兩列的邊框厚度:
column-rule-style 屬性指定了列與列間的邊框樣式
column-rule-color屬性指定了兩列的邊框顏色

漸變

線性漸變：屬性裡用linear-gradient(漸變角度，初始顏色，末尾顏色)0deg是從下到上
repeating-linear-gradient() 函式用於重複線性漸變
貝塞爾曲線：cubic-bezier