CSS3常用樣式總結

標籤：ack   相同   css3   star   轉化   設定   自訂   break   常用   

原地旋轉	transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */
邊框圓角	border-radius:25px;
添加陰影	box-shadow: h-shadow v-shadow blur spread color inset; 水平位置；垂直位置；模糊距離；陰影尺寸；陰影顏色；inset將外部陰影轉化為內部陰影 前兩個為必填
邊框圖片	-webkit-border-image: url(border.png) 30 30 round;/* Safari 5 and older */ -o-border-image: url(border.png) 30 30 round;/* Opera */ border-image: url(border.png) 30 30 round; round：平鋪 stretch：展開填充
border邊框	四個值: 第一個值為左上方，第二個值為右上方，第三個值為右下角，第四個值為左下角。 　三個值: 第一個值為左上方, 第二個值為右上方和左下角，第三個值為右下角 　兩個值: 第一個值為左上方與右下角，第二個值為右上方與左下角 　一個值： 四個圓角值相同
背景圖片	background-image: url(); /* 圖片路徑 */ background-position: right bottom, left top;/* 圖片定位 */ background-repeat: no-repeat, repeat;/* 是否填充 */ background-size:80px 60px;/* 圖片大小 */ background: url() right bottom no-repeat;/* 第二種寫法 */
線性漸層	background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue);/* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue);/* Firefox 3.6 - 15 */ background: linear-gradient(red, blue);/* 標準的文法 ，預設上下漸層*/ background: linear-gradient(to bottom right, red , blue); /* 左上方到右下角 ， 自訂漸層*/ background: linear-gradient(red 10%, green 85%, blue 90%); /* 標準的文法（必須放在最後） */ background: radial-gradient(red, green, blue); /* 從圓中心向外漸層　　*/
透明度	rgba(255,0,0,1)：前三個值為顏色取值；第四個值為透明大小  0—1
文本陰影	text-shadow: 5px 5px 5px #FF0000;
自動換行	word-wrap:break-word;
文本溢出	text-overflow: clip　|　ellipsis　; clip：超出剪下 ellipsis：超出用……代替
字型樣式	font-family: "Times New Roman";/* 規定字型的名稱 */ src: url();/* 字型檔的 URL */ font-weight:bold;/* 定義字型的粗細。預設是 "normal" */
li前面的小點	list-style: none; none不使用項目符號   disc實心圓，預設值   circle空心圓   square實心方塊   decimal阿拉伯數字   lower-roman小寫羅馬數字   upper-roman大寫羅馬數字   lower-alpha小寫英文字母   upper-alpha大寫英文字母
a標籤	text-decoration: none;/*去掉底線樣式*/ text-decoration:underline;/*底線樣式*/ text-decoration:line-through;/*刪除線樣式-貫穿線樣式*/ text-decoration:overline;/*上劃線樣式*/ a{color:black} /*設定預設顏色*/ a:link {color:blue;} /*未訪問顏色*/ a:visited {color:gray;} /*已訪問顏色*/ a:hover {color:red;} /*懸浮（滑鼠經過）時顏色*/ a:active {color:yellow;} /*點擊時的顏色*/

CSS3常用樣式總結