我的 CSS3 笔记
1. CSS3 選擇器
2. CSS3屬性
1、position屬性
定義和用法：position 屬性規定元素的定位類型。
說明：這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
可能的值：
瀏覽器支持：所有主流瀏覽器都支持 position 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
2.css的z-index屬性
定義和用法：z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明：該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
可能的值：
瀏覽器支持：所有主流瀏覽器都支持 z-index 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
2、box-shadow 屬性
box-shadow 屬性向框添加一個或多個陰影。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
3、pointer-events
pointer-events屬性值詳解
- auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
- none——元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的。
- 其它屬性值為SVG專用，這里不再多介紹了。
pointer-events: none;
可以讓某個元素實現類似于海市蜃樓的效果，具體理解為，你可以看的到某個元素，但是你無法摸的著。而 display：none; 是你摸不著，也看不見。
如果把某個元素再加上opacity：0；則可以很容易實現類似display:none；的效果（摸不著，看不見）。
更多用法請查看 pointer-events: none; 忽略某一層的存在
3. C33 的 2D和3D 轉換
2D 轉換包括：平移，旋轉，縮放，偏轉
<style>/*transform 表示要進行2d轉換了 平移，旋轉，縮放，偏轉 */.box{width: 800px;height: 650px;background-color: #ccc;margin: 200px auto;}img{transition: all 2s;/*transform-origin: left center;*//*改變中心旋轉點，left,center,right,top，center，bottom*/}img:hover{/*平移，兩個值，一個水平位置，一個垂直位置， 平移后仍然占位置，是平移前的位置*//*-webkit-transform: translate(100px,100px)*//*旋轉，方向是順時針，中心點是正中心*//*-webkit-transform:rotate(360deg);*//*偏轉，第一個值水平偏轉方向，第二個值垂直偏轉方向*//*-webkit-transform:skew(180deg,360deg);*//*縮放，第一個值水平縮放倍數，第二值垂直縮放倍數，可用于鼠標經過時放大*//*-webkit-transform:scale(2,2);*//*如果要想添加多個2D轉化，用空格隔開*/ /*先平移，后旋轉*//*-webkit-transform:translate(300px,0) rotate(180deg);*/} </style> <div class="box"><img src="images/gl.jpg" alt=""> </div>復制代碼? 瀏覽器兼容性的處理，比如：
? -webkit-transform，-moz-transform，-ms-transform，-o-transform
?CSS3 的 3D 轉換
<style>.box{width: 600px;margin: 200px auto;perspective: 520px;/*透視屬性*/}.box:hover img{/*-webkit-transform:translateZ(200px);*//*平移的3D轉換*/-webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);/*-webkit-transform:rotateX(360deg);*/}img{transition: all 1.5s;}</style> </head> <body><div class="box"><img src="images/mw.jpg" alt=""></div> </body>復制代碼4. CSS3 的過渡動畫
<style> .box{width: 300px;height: 300px;background-color: red;-webkit-transition:width 2s ease-in-out 3s, height 2s linear 1s, background-color 2s linear;/*第一個值，表示發生改變的屬性，all 只要發生改變的屬性，全部加上過渡動畫*//*第二個值，表示時間*//*第三個值，表示動畫的運行軌跡*//*如果有第四個值，表示 先變化一個屬性，延遲一定時間，再變化另一個屬性，兩個屬性之間用逗號隔開*/}.box:hover{width: 1500px;height: 500px;background-color: pink;} </style> <div class="box"></div>復制代碼如果有第四個值，表示 先變化一個屬性，延遲一定時間，再變化另一個屬性， 兩個屬性之間用逗號隔開
linear,規定以相同速度開始至結束的過渡效果（等于cubic-bezier(0,0,1,1)）
ease，規定慢速開始，然后變快，然后慢速結束的過渡效果（等于cubicbezier(0.25,1,0.25,1)）
ease-in，規定以慢速開始的過渡效果，（等于cubic-bezier(0.42,0,1,1)）
ease-out，規定以慢速結束的過渡結果（等于cubic-bezier(0,0,0.58,1)）
ease-in-out，規定以慢速開始和結束的過渡效果，（等于cubic-bezier(0.42,0,0.58,1)）
必須要有： 1.起始屬性? 2.終止屬性?
?CSS3 過渡使用?
?1.需要具有層級關系?
?2.必須是 hover 可以做到的?
?3.需要考慮是否有動態數據的添加，沒有動態就可以用，動態數據用jQuery來寫，用回調來接收動態數據?
5. object-fit ( image，video ) 自適應
（1）替換元素
? 其內容不受CSS視覺格式化模型（中文釋義參見這里）控制的元素，比如image, 嵌入的文檔(iframe之類)或者applet。比如，img元素的內容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸：一個固有的寬度，一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度，從而也有固有的寬高比率。另一方面，其他文檔也可能沒有固有的尺寸，比如一個空白的html文檔。 CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立于CSS。object, video, textarea, input也是替換元素，audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。
（2）為何需要object-position/object-fit?
?適配響應式布局
（3）object-fit理解
.fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }復制代碼每個屬性值的具體含義如下：
fill : 中文釋義“填充”。默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。?
contain : 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此，此參數可能會在容器內留下空白。?
cover : 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數可能會讓替換內容（如圖片）部分區域不可見。 none : 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。?
scale-down : 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。
6.? 同向邊距的重合問題（overflow : hidden 三個作用）
? ?overflow : hidden??
（1）給父級加 overflow : hidden 可以清除子級浮動對父級的影響
（2）給父級加 overflow : hidden 可以使子級超出部分隱藏（比如：制作輪播圖時）
（3）給父級加 overflow : hidden。解決同向邊距的重合問題；
HTML: <div id="box"><p>中華人民共和國</p> </div CSS: <style>*{padding: 0;margin: 0;}#box{width: 300px;height: 300px;background-color: aquamarine;/* padding-top: 30px; */}#box p{background-color: brown;margin-top: 30px;} </style> 復制代碼子集元素加入margin:top 的同時，父級元素沒有margin:top，那么子集元素的margin：top 會加到父級上，導致整體的div全部下降，解決思路：給父級加 overflow:hidden 屬性?案例
案例 1：盾牌制作：
<style>html,body{background-color: pink;width: 100%;height: 100%;position: relative;padding-top: 1px;/*同向邊距問題的解決：1. overflow: hidden;2.padding-top: 1px;*/}.box{width: 480px;margin: 100px auto;/*上下100px，左右相等*/}.box img:first-child{transform: translate(-200px,50px) rotate(45deg);}.box img:nth-child(2){transform: translate(-600px,-50px) rotate(60deg);}.box img:nth-child(3){transform: translate(400px,80px) rotate(60deg) scale(.5,.5);}.box img:nth-child(4){transform: translate(-400px,-90px) rotate(60deg) scale(.5,.5);}.box img:nth-child(5){transform: translate(0px,80px) rotate(54deg) scale(.5,.5);}.box img:nth-child(6){transform: translate(400px,80px) rotate(65deg) scale(.5,.5);}.box img:nth-child(7){transform: translate(400px,80px) rotate(45deg) scale(.5,.5);}.box img:nth-child(8){transform: translate(0px,-300px) rotate(265deg) scale(.5,.5);}.box img:nth-child(9){transform: translate(0,80px) rotate(60deg);}img{transition: all 2s;}body:hover .box img{transform: none;}</style> </head> <body><div class="box"><img src="images/shield_1_01.png" alt=""><img src="images/shield_1_02.png" alt=""><img src="images/shield_1_03.png" alt=""><img src="images/shield_1_04.png" alt=""><img src="images/shield_1_05.png" alt=""><img src="images/shield_1_06.png" alt=""><img src="images/shield_1_07.png" alt=""><img src="images/shield_1_08.png" alt=""><img src="images/shield_1_09.png" alt=""></div> </body>復制代碼案例 2：撲克牌
<style>.box{background-color: skyblue;width: 600px;height: 600px;margin: 200px auto;position: relative;}.box img{position: absolute;top:100px;left: 100px;transition: all 1s;transform-origin: center bottom; }.box:hover img:first-child{transform: rotate(0deg);}.box:hover img:nth-child(2){transform: rotate(15deg);}.box:hover img:nth-child(3){transform: rotate(30deg);}.box:hover img:nth-child(4){transform: rotate(45deg);}.box:hover img:nth-child(5){transform: rotate(60deg);}</style> </head> <body><div class="box"><img src="images/pk1.png" alt=""><img src="images/pk1.png" alt=""><img src="images/pk1.png" alt=""><img src="images/pk1.png" alt=""><img src="images/pk1.png" alt=""></div> </body>復制代碼案例3. 鐘表的翻轉
<style>.box{width: 300px;height: 300px;background-color: red;perspective: 600px;}.box::before,.box::after{content: "";display: block;width: 300px;height: 300px;-webkit-background-size:100% 100%;background-size: 100% 100%;position: absolute;}.box::before{background-image: url(images/1.jpg);z-index: 1;}.box::after{background-image: url(images/timg.jpg);transition: transform 2s;transform-origin: right center;z-index: 2;}.box:hover::after{transform: rotateY(180deg);}</style> </head> <body><div class="box"></div> </body>復制代碼案例4. 正反面的翻頁效果
<style>.box{width: 310px;height: 441px;position: relative;margin: 0 auto;}.box img{position: absolute;top: 0;left: 0;transition: all 1s;backface-visibility: hidden;/*背面隱藏*/perspective: 500px;/*透視屬性，可以增加3D效果*/}.box img:first-child{z-index: 2;}.box img:nth-child(2){-webkit-transform:rotateY(180deg);}.box:hover img:first-child{-webkit-transform:rotateY(180deg);}.box:hover img:nth-child(2){-webkit-transform:rotateY(0);}</style> </head> <body><div class="box"><img src="images/pk1.png" alt=""><img src="images/pk2.png" alt=""></div> </body>復制代碼案例5. 正方體的制作
style>body{perspective: 800px;}div{width: 300px;height: 300px;border: 1px solid #ccc;}.box{margin: 400px auto;position: relative;transform-style: preserve-3d;-webkit-transform:rotateY(24deg) rotateX(35deg);transition: transform 6s linear;}.box:hover{-webkit-transform:rotateY(360deg) rotateX(360deg);}.box div{position: absolute;line-height: 300px;text-align: center;font-size: 100px;color: #ccc;}.box div:first-child{background-color: red;transform-origin: right;-webkit-transform:rotateY(90deg); }.box div:nth-child(2){background-color: orange;transform-origin: left;-webkit-transform:rotateY(270deg); }.box div:nth-child(3){background-color: yellow;-webkit-transform:rotateX(90deg) translateY(150px) translateZ(150px);}.box div:nth-child(4){background-color: green;transform-origin: left;-webkit-transform:rotateX(270deg) translateY(-150px) translateZ(150px); }.box div:nth-child(5){background-color: blue;-webkit-transform:translateZ(300px)}.box div:nth-child(6){background-color: purple;-webkit-transform:rotateY(180deg); }</style> </head> <body><div class="box"><div class="up">上</div><div class="down">下</div><div class="left">左</div><div class="right">右</div><div class="front">前</div><div class="rear">后</div></div> </body>復制代碼總結
以上是生活随笔為你收集整理的我的 CSS3 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 逆向研究
- 下一篇： DIV + CSS 神话