框架集
<fieldset></fieldset> 是另一個body不能和body同時出現(xiàn)
框架集就是把多個內容放到一個框里
ie6png的修復
<!-- 修復代碼要寫到body最后的位置 -->
<!--[if IE 6]>?
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript">DD_belatedPNG.fix('div,img');</script>?
<![endif]-->
CSS3過渡動畫
CSS3 transition動畫
CSS3 transform變換
CSS3 animation動畫
transition :
????????????????width 500ms ease? 寬延遲500毫秒
? ? ? ? ? ? ? ??height 500ms ease? ?高延遲500毫秒
/*設置圓表*/
border-radius: 50px;
園角
設置某一個角的圓角,比如設置左上角的圓角:
border-top-left-radius:30px 60px;
同時分別設置四個角: border-radius:30px 60px 120px 150px;
設置四個圓角相同:
border-radius:50%;
陰影
box-shadow:h-shadow v-shadow blur spread color inset;
分別設置陰影:水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內陰影
陰影不能設置負值
運動曲線
transition: all
? ? ? ? ? ? ?linear 勻速
????????????ease 開始和結束慢速
? ? ? ? ? ? ease-in 開始是慢速
????????????ease-out 結束時慢速
圖片文字遮罩
hover是顯示鼠標圖的
display: none;? 隱藏圖片
dispay: block;? 顯示圖片
CSS3 transform變換
1、translate(x,y) 設置盒子位移
2勉耀、scale(x,y) 設置盒子縮放
3、rotate(deg) 設置盒子旋轉
4啦膜、skew(x-angle,y-angle) 設置盒子斜切
5、perspective 設置透視距離
6、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
7、translateX拯欧、translateY、translateZ 設置三維移動
8财骨、rotateX镐作、rotateY、rotateZ 設置三維旋轉
9隆箩、scaleX该贾、scaleY、scaleZ 設置三維縮放
10捌臊、tranform-origin 設置變形的中心點
11杨蛋、backface-visibility 設置盒子背面是否可見