標籤：shadow 指定 div 角度 nat 空間 結束 border order
一，css3基本情況介紹。
顧名思義css3是css2的升級版本，它較以往版本新增了很多強大的功能。目前chrome，safari，firefox
opera，IE10以後都開始支援css3的效果。
1.具體增加的強大功能介紹。
.選取器：以前我們通常用class，id，tagname 來作為html元素的選取器。css3的選取器更強大，他可以減少
標籤中的class，id的數量，更方便的維護樣式表，更好的實現結構與表現的分離。
.圓角效果：border-radius。
.塊陰影和文字陰影：可以對任意div和文字增加投影效果。
.色彩：css3支援更多的顏色和更廣泛的顏色定義。新顏色css3支援HSL,CMYK,HSLA,RGBA。
.漸層效果：以前只能用ps做出這種效果就對了。
.個人化字型：@font-face；輕鬆實現定製字型。
.多背景圖：一個元素上增添多張背景圖片。
.邊框背景圖：這個自己體會。
.變形處理：可以對html元素進行需旋轉，縮放，移動。和一些以前只能用js實現的效果。
.多欄布局：類似於報紙結構。需要多個div，瀏覽器解釋這個屬性並產生多欄結構。
.媒體查詢：針對不同螢幕解析度，應用不同樣式。
2.圓角具體使用：border-radius：左上 右上 右下 左下;
3.邊框，陰影：
box-shadow: X軸位移量 Y軸位移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顏色] [投影方式];
inset放在最後會讓陰影成為內陰影。只能放在最後。可添加多個陰影，只需用逗號隔開就好。
所謂位移量：就是你希望陰影處在那方。
4.rgba(color,color,color,透明度);
5.linear-gradient(方向，起始顏色，過渡顏色（多種），結束顏色)。
選擇的方向：to (left right bottom top top left top right)
6.text-overflow:clip(直接剪下)|ellipsis（變為省略符號） ;
word-wrap:normol(控制連續文本換行)|| break-word；
[email protected]能夠載入伺服器端的字型檔，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。
@font-face {
font-family : 字型名稱;
src : 字型檔在伺服器上的相對或絕對路徑;
}
p {
font-size :12px;
font-family : "My Font";
/*必須項，設定@font-face中font-family同樣的值*/
}
8.text-shadow可以用來設定文本的陰影製作效果。
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平位移距離，其值為正值時陰影向右位移，反之向左位移；
Y-Offset：是指陰影的垂直位移距離，如果其值是正值時，陰影向下位移，反之向上位移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設定為0；
Color：是指陰影的顏色，其可以使用rgba色。
9.background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，還是內邊距（預設值），或者是內容地區開始顯示。
10.用來將背景圖片做適當的裁剪以適應實際需要。
background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或內填充，或者內容地區向外裁剪背景。
no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip預設值為border-box。
11.background-size 設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
background-size: auto | <長度值> | <百分比> | cover | contain;
1、auto：預設值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設定為前面兩個值，當設定一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
12.multiple backgrounds；
多重背景，也就是CSS2裡background的屬性外加origin、clip和size組成的新background的多次疊加，
縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），
表明所有背景圖片應用該屬性值。
background ： [background-color] | [background-image] | [background-position][/background-size] |
[background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top /150px 40px,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom /200px 20px;
13.三種選取器：E(att^$*="val");E 代表標籤，^代表開頭匹配，$代表末尾匹配，*代表任意匹配。
14.:root選取器，從字面上我們就可以很清楚的理解是根選取器，他的意思就是匹配元素E所在文檔的根項目。在HTML文檔中，根項目始終是<html>。
15.：not 選取器，除開這個沒有這種樣式。
16：:empty選取器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。
17：:target選取器稱為目標選取器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。
18： “:first-child”選取器表示的是選擇父元素的第一個子項目的元素E。簡單點理解就是選擇元素中的第一個子項目，記住是子項目，而不是後代元素。
19.::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的情境最多的就是清除浮動。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
exm：<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
</style>
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
</div>
</body>
</html>
20.rotate(角度)。偏轉。角度為正時順時針，為負數時逆時針。具體寫法：transfrom: rotate();
21.skew(x,y);也可以只傳一個參數，即為單向偏轉。
22.scale(x,y);縮放。<1縮小 ，>1放大。
23.translate(x,y); 移動div。
24.matrix(a,b,c,d,e,f);
a為元素的水平伸縮量，1為原始大小；
b為縱向扭曲，0為不變；
c為橫向扭曲，0不變；
d為垂直伸縮量，1為原始大小；
e為水平位移量，0是初始位置；
f為垂直位移量，0是初始位置;
25.transition-property:通過滑鼠的單擊、獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
26.transition-duration:這是控制速度的。
27.transition-timing-function屬性指的是過渡的“easing 函式”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括
ease(由快變慢); linearI(恒速); ease-in(加速);ease-out(減速);ease-in-out(先加再減);
28.transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設定過渡動畫的期間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
29.Keyframes被稱為主要畫面格，其類似於Flash中的主要畫面格。在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括弧“{…}”，括弧中就是一些不同時間段樣式規則。
30.animation-delay:控制開始播放時間。
40.animation-iteration-count:設定播放次數。如果取值為infinite，動畫將會無限次的播放。
41.animation-direction屬性主要用來設定動畫播放方向.1、normal是預設值，如果設定為normal時，動畫的每次迴圈都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
42.animation-play-state屬性主要用來控制元素動畫的播放狀態。
43.animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。
none
預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards
表示動畫在結束後繼續應用最後的主要畫面格的位置
backwards
會在向元素應用動畫樣式時迅速應用動畫的初始幀
both
元素動畫同時具有forwards和backwards效果
44.columns:多欄版面配置。columns: 200px 2;分別代表列寬，列數。
45.column-width: column-count: 一個是列寬，一個是列數。
46.CSS3 列間距column-gap；（可用單位px，em）
47.column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不佔用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
50.box-sizing: content-box(w3c的計算方法) border-box(ie的計算方法) inherit（父級的計算方法）
51.1. 最大寬度max-width
“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
52.自由縮放屬性resize resize: none | both | horizontal | vertical | inherit
53.outline(類似於border一樣的屬性，只是它不佔用布局空間，而且形狀也不一定是矩形。)
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
54.h1:before {
content:"我是被插進來的";
color: red;
}
55.none定義不進行轉換。測試
matrix(n,n,n,n,n,n)定義 2D 轉換，使用六個值的矩陣。測試
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)定義 2D 轉換。測試
translate3d(x,y,z)定義 3D 轉換。
translateX(x)定義轉換，只是用 X 軸的值。測試
translateY(y)定義轉換，只是用 Y 軸的值。測試
translateZ(z)定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)定義 2D 縮放轉換。測試
scale3d(x,y,z)定義 3D 縮放轉換。
scaleX(x)通過設定 X 軸的值來定義縮放轉換。測試
scaleY(y)通過設定 Y 軸的值來定義縮放轉換。測試
scaleZ(z)通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)定義 2D 旋轉，在參數中規定角度。測試
rotate3d(x,y,z,angle)定義 3D 旋轉。
rotateX(angle)定義沿著 X 軸的 3D 旋轉。測試
rotateY(angle)定義沿著 Y 軸的 3D 旋轉。測試
rotateZ(angle)定義沿著 Z 軸的 3D 旋轉。測試
skew(x-angle,y-angle)定義沿著 X 和 Y 軸的 2D 傾斜轉換。測試
skewX(angle)定義沿著 X 軸的 2D 傾斜轉換。測試
skewY(angle)定義沿著 Y 軸的 2D 傾斜轉換。測試
perspective(n)為 3D 轉換元素定義透視視圖。測試
css3學習筆記，隨時幫你記起遺忘的css3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
