CSS3高级
一、學習目標
?二、box-sizing屬性
語法：box-sizing: content-box|border-box|inherit
box-sizing屬性的用法：
box-sizing屬性可以為三個值之一：
content-box（default），border-box，padding-box。
1.content-box，border和padding不計算入width之內
2.padding-box，padding計算入width內
3.border-box，border和padding計算入width之內
<style type="text/css">.content-box{box-sizing:content-box;-moz-box-sizing:content-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #E6A43F;background: blue;}.padding-box{box-sizing:padding-box;-moz-box-sizing:padding-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #186645;background: red; }.border-box{box-sizing:border-box;-moz-box-sizing:border-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #3DA3EF;background: yellow;}</style></head><body><div class="content-box"></div><div class="padding-box"></div><div class="border-box"></div></body>實現效果：
?
?
由于瀏覽器兼容性問題，可能會出現以下效果：
?三、box-shadow（盒子陰影）
語法：box-shadow: h-shadow v-shadow blur spread color inset;
取值如下： <length> <length> <length>? <length>? || <color>：
陰影水平偏移值（可取正負值）；
陰影垂直偏移值（可取正負值）；
陰影模糊值；陰影顏色
-moz-, -webkit-, -o-這些都是瀏覽器前綴。
常用前綴和瀏覽器的對應關系如下：
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
<body><img src="hh.png"></img></body>
?四、圓角屬性值
?語法： border-radius: 1-4 length|% / 1-4length|%;
注釋：按此順序設置每個 radii 的四個值。
如果省略 bottom-left，則與 top-right 相同。
如果省略 bottom-right，則與 top-left 相同。
如果省略 top-right，則與 top-left 相同。
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
案例：
<body><div></div></body>
?
?
?
?
?四、CSS3 2D變形
通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
2D轉換的屬性名為transform，使用方法為transform:method(value)。
2D轉換方法有translate、scale、rotate、skew、matrix，還有基于這些分支出的translateX、scaleY等
?CSS3 2D轉換詳解：
<style type="text/css">.wrap {position:absolute;left:50%;top:50%;transition: all 0.5s ease-in-out;width: 80px;background: red;color: pink;text-align: center;padding: 10px;border-radius: 6px;font-size: 18px; }/* 平移 */.wrap:hover{transform:translate(20px,20px);}/* 旋轉 */.wrap:hover{transform:rotate(90deg);}/* 傾斜 */.wrap:hover{transform:skew(30deg,10deg);}/* 縮放 */.wrap:hover{transform:scale(1.2);}/* 組合 */.wrap:hover{transform:scale(1.5) rotate(90deg);}</style></head><body><div class="wrap"></div></body>
五、css3過渡
?CSS3過渡屬性:
<!-- 過渡 --><style type="text/css">a{-webkit-transition:padding 1s ease-out,backgrond-color 2s linear;}a:hover{padding-left: 20px;background-color: pink; }</style></head><body><a href="#">魔鬼中的天使</a><br/><a href="#">魔鬼中的天使</a><br/><a href="#">魔鬼中的天使</a><br/></body>
六、css3動畫
?動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。 請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
css3動畫屬性：
?
<style type="text/css">div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}.one{opacity:0;display: block;font-weight: bold;height: 50px;-webkit-animation:ersha 5s ease-out;}.two{opacity:0;display: block;font-weight: bold;height: 50px;-webkit-animation:doubi 5s ease-out 5s forwards;}@-webkit-keyframes ersha{0%{opacity:0; transform:translate(0px)}10%{opacity:0.2; transform:translate(20px) }20%{opacity:0.4; transform:translate(40px)}100%{opacity:1; transform:translate(100px)}}@-webkit-keyframes doubi{0%{opacity:0; transform:translate(0px)}10%{opacity:0.2; transform:translate(20px) }20%{opacity:0.4; transform:translate(40px)}100%{opacity:1; transform:translate(100px)}}</style></head><body><div><span class="one">我會移動，你信嗎，嘻嘻</span><span class="two">我會移動，你信嗎，嘿嘿</span></div></body>?
轉載于:https://www.cnblogs.com/WJ-163/p/6284173.html
總結
- 上一篇： 正弦曲线模拟水波纹
- 下一篇： Codevs 5590 A+B 问题