css3的學習筆記

• 2019 年 12 月 4 日
• 筆記

本文作者：IMWeb 雲師兄 原文出處：IMWeb社區 未經同意，禁止轉載

適合初學者以及沒看過css3的人快速了解css3的主要內容。

1.opacity ----------------------取值0-1之間，給整個元素和其所有子元素設置透明度級別

2.css選擇器----------------------http://www.w3school.com.cn/cssref/css_selectors.asp 其中li:nth-child(2n+1)表示選擇基數個(可以類推) input:not([type="submit"]) 可以做否定的選擇 3.html5兼容瀏覽器老版本對標籤不識別問題 <!--[if Lt IE 9 ] [removed] [removed]

4.文本陰影 text-shadow:1px 1px 1px white; 右偏移，左偏移， 模糊程度（1個PX相當於一個輪廓） ，顏色

5.多出的文本隱藏和顯示 overflow:hidden;text-overflow:ellipsis； hover 偽類加上overflow:hidden;text-overflow:ellipsis；text-overflow:inherit; overflow:visible;

6.圓角 border-radius:10px 10px 10px 10px (左上，右上，右下，左下) 可以寫一個值，所有角都是統一的，也可以寫2個值表示左上，右上以及和他們相對的角，也可寫 10px/50px.表示該角按x，y軸的偏移來畫弧

7.陰影 box-shadow:0 0 10px #666; 第一個值為x 偏移（可以為負，表示右邊）， 第二個值為y偏移（可以為負，表示上邊），第三個值為模糊的長度，第四個值為 陰影顏色。

8.漸變 linear-gradient(to right,#ff0000 50%,#007700 50%); 第一個值可以為to right ，to top right ，等線性值。後面的為 漸變的顏色，可以有多個值，可以手動加百分比，，可以自動讓其漸變。

repeateing- linear-gradient 為重複漸變 radial-gradient(50% 50%, 60% 60%,rab(75,75,255),rgb(0,0,0) ); 徑向漸變，，第一個值為漸變的原點，第二值為漸變的大小位置。漸變可以用rgba的顏色值

9.多重背景 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可添加多個URL，放置圖片

background-size:63px 100px;控制尺寸，可以按像素，可以按比例

background-origin:content-box;可以選擇填充範圍

10.邊框圖片 border-image:url(border.png) 30 30 30 30 round; 數字代表圖片裁減成邊框切片的寬度

動畫-------------------------------------------------------------------------------------

11.2D變形 transform

transform:translate(-50%,-50%); 移動 ，當前元素向左移動該元素的一半寬度，和向上移動高度的一半，值可以有正負，可以為像素，可以為百分比（當指定一個值時默認為x）

transform: rotate(15deg); 旋轉 ,當前元素順時針旋轉多少度。（默認是按中心點）

附:transform-orgin:top left;設置變形的中心點，可以為px，rem，em，cm等值，也可以百分比，也可以關鍵詞，如center，bottom right等

transform:scale(1.25,0.8); 縮放 ，按比例縮放大小，當為一個值時候，默認x，y都按這比列，也可以單獨對x，y設置，scaleX，scaleY

transform:skew(10deg,13deg); 旋轉 ,x,和y的值是沿著坐標軸傾斜的度數，可以單獨設置skewX,skewY

12.3D變形

transform:translate3D（100px,100px,100px）;X,Y,Z移動；

transform: rotateX(15deg);按X軸旋轉，也有rotateY，rotateZ

transform: rotate3D(1，0，1，15deg）；3D旋轉，前3個表示立體面中的向量值，然後沿著那個面旋轉

transfrom:perspective(200px);透視的值，是按像素值，就是看一個東西的角度，perspective-orgin:center;透視的中心，該值和變形中心一樣的取值方法；

transfrom-style:preserver-3d; 多個元素3D變形時候，不會出現資訊丟失，遮蓋等情況。

backface-visibility:hidden;表示當元素背對我們的時候不顯示

13.過度 transition

transition-property:width;過度的屬性值，可以為高，寬，甚至可以為transform------必寫屬性

transition-duration:0.5s; 過度的時間，默認為0------必寫屬性

transition-timing-function:liear;過度的速率，默認為easy；linear(相同速度),ease(逐漸變慢),ease-in(加速),ease-out(減速),ease-in-out(加速然後減速)

transition-delay:1s;延遲時間

可以簡寫transition:opactity 3s eas-in 1s,opactity 3s eas-in 1s;多個屬性『，』隔開，屬性順序為，屬性值、過度時間、速率、延遲時間，

14.動畫 animation

animation-name:cc;名稱

animation-duration:1.5s;動畫持續時間

animation-iteration-count:infinite;播放次數，默認是1次，無限循環的時候是infinite;

animation-delay:2s; 延遲時間；

animation-timing-functuin:linear;linear(相同速度),ease(逐漸變慢),ease-in(加速),ease-out(減速),ease-in-out(加速然後減速)----和過度是屬性是一樣的

animation-direction:alternate;播放結束後循環播放的順序，默認是從頭循環，alternate是0%----100%-----0%從頭到尾在從尾到頭。

animation-fill-mode:none;屬性規定動畫在播放之前或之後，其動畫效果是否可見,forwards:當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

backwards:在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。both:向前和向後填充模式都被應用。

可以簡寫 animation:cc 1.5s ease-in 3s 25 alternate backwards;多個動畫的時候『，』隔開

布局--------------------------------------------------------------------------------------

15.多欄布局 column

column-count:3; 規定元素應該被分隔的列數。

column-width:200px; 規定元素應該按該寬度去分列數。

column-gap:10px;；欄目之間的間隔距離

column-rule:3px solid #666; 欄目和欄目之間的那個線，屬性和border是一樣的;

column-fill:balance;填充方式，默認是auto,從左往右一次填充， balance是每個欄目基本內容填充的都差不多

column-span:3;寬欄目設置，可以設置某個在欄目中的元素，所跨的欄目數

16.流動布局 flexbox

display:flex;布局模型設置為flexbox；

flex-flow:row warp;排列方式，row為橫向，column為垂直。warp為自動換行。

order:1;控制子元素的排列順序；( 屬性寫在子項上)

justify-content:center;子項的內容排列；有，flex-start,flex-end,center,space-between,space-around,

algin-items:center;讓子項沿著當前的方向側軸進行排列，值有。flex-start,flex-end,center，baseline,stretch.(algin-self為子項屬性，當用於子項時候，會重寫algin-items值)

flex:1 1 200px;（屬性寫在子項上面）第一個參數是按比例分配父親元素的剩下份額，第二個是，按比例分配當元素溢出後產生的值。然後子項減去該值。第三個為該元素的值。

17.網格布局 grid

display:grid;布局模型設置為grid的網格

grid-columns:10rem 40rem 30rem；設置3列大小為10rem 40rem 30rem；

grid-rows:1fr 1fr 1fr 1fr;設置為4行，fr為份數，總份數為該值所有加起來；

子元素屬性

grid-column:1;子元素選擇第幾列；

grid-column-span:2;子元素以當前列為啟示，選擇跨越的列數；

grid-row:2;子元素選著第幾行；

grid-row-span:2;子元素選擇跨越的的行數，當前行為起始；

18.清除 wrap-flow:both;排除

auto默認值，如果採用該值，周圍的文本不再環繞排除項區域，它只會位於排除項元素的低下，就好像排除項不存在一樣。

start意味著內容在排除項區域的開始側環繞，但是在排除項區域的結尾側保留為空的內容。

end意味著內容在排除項區域的結尾側環繞，但是在排除項區域的開始側保留為空的內容。

both意味著內容在排除項開始和結尾（即四周）環繞。

maxinum會讓內容向排除項有最大空間的一側環繞。

clear意味著內容只能在排除項的上下兩側環繞，並且排除區域的左右（開始和結尾）兩側保留為空。

warp-margin:10px；指定其他剩餘內容與排除項元素之間的外邊距。

warp-padding:10px;指定其他剩餘內容與排除項元素之間的內邊距。

19.媒體查詢

@media all and(min-width:400px)