CSS3總結

本文轉載自查看原文 2015-11-28 21:25 1062 HTML+CSS

一、特殊邊框

　　通過 CSS3，能夠創建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框。邊框屬性：　

1、border-radius：創建圓角邊框

　　border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。

　　eg：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>css3</title>
 6     <style type="text/css">
 7         p{
 8             border:2px solid;
 9             border-radius:30px;
10             text-align:center;
11         }
12     </style>
13 </head>
14 
15 <body>
16     <p>這是一個CSS3圓角邊框！</p>
17 </body>
18 </html>

2、box-shadow：向矩形添加陰影

　　box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

　　　　eg：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>css3</title>
 6     <style type="text/css">
 7         div{
 8             box-shadow:10px 10px 5px #999;
 9             text-align:center;
10             background-color:#FF6;
11             width:300px;
12             height:100px;
13         }
14     </style>
15 </head>
16 
17 <body>
18     <div >陰影效果</div>
19 </body>
20 </html>

3、border-image：使用圖片來繪制邊框

　　eg：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>css3</title>
 6     <style type="text/css">
 7         div{
 8             width:300px;
 9             height:100px;
10             border:15px solid;
11         }
12         #round{
13             border-image:url(%E5%9B%BE%E7%89%87/5.png) 30 30 round;
14         }
15         #stretch{border-image:url(%E5%9B%BE%E7%89%87/5.png) 30 30 stretch;
16     </style>
17 </head>
18 
19 <body>
20     <p>原始圖片：</p>
21     <img src="圖片/5.png" /><br>
22     <div id="round">圖片鋪滿整個邊框。</div><br>
23     <div id="stretch">圖片被拉伸以填充該區域。</div>
24 </body>
25 </html>

二、背景

1、背景屬性：

2、background-size：背景圖片的尺寸

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>背景圖片</title>
 6     <style type="text/css">
 7         #id1{
 8             background:url(%E5%9B%BE%E7%89%87/6.png);
 9             background-repeat:no-repeat;
10             background-size:200px 200px;
11             padding-top:200px;
12         }
13         #id2{
14             background:url(%E5%9B%BE%E7%89%87/6.png);
15             background-repeat:no-repeat;
16             background-size:40% 40%;
17             padding-top:100px;
18         }
19     </style>
20 </head>
21 
22 <body>
23     <p>原始圖片</p><img src="圖片/6.png" />
24     <div id="id1"><p>這是放大的圖片</p></div>
25     <div id="id2"><p>這是拉伸的圖片</p></div>
26 </body>
27 </html>

3、background-origin 屬性規定背景圖片的定位區域

　　背景圖片可以放置於 content-box、padding-box 或 border-box 區域。（和background-clip一樣）

三、文本效果

1、文本屬性

2、事例：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文本</title>
 6     <style type="text/css">
 7         h4{text-shadow: 5px 5px 5px #FF0000;}
 8         p {
 9             width:11em; 
10             border:1px solid #000000;
11             word-wrap:break-word;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <h4>文本陰影效果</h4>
18     <p>單詞太長的話就可能無法超出某個區域。在 CSS3 中，word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味着會對單詞進行拆分：This paragraph contains a very long word:thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
19 </body>
20 </html>

四、2D轉換：通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸　　　

translate()：移動；rotate()：旋轉；scale()：縮放；skew()：傾斜；matrix()：矩陣

五、3D轉換

rotateX()；rotateY()

六、過渡：CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

　　要實現這一點，必須規定兩項內容：

　*規定希望把效果添加到哪個 CSS 屬性上

　　　　*規定效果的時長

　　eg：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>過渡</title>
 6     <style> 
 7         div{
 8             width:100px;
 9             height:100px;
10             background:yellow;
11             transition:width 2s, height 2s;
12             -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
13             -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
14             -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
15         }
16         
17         div:hover{
18             width:200px;
19             height:200px;
20             transform:rotate(180deg);
21         }
22     </style>
23 </head>
24 <body>
25     <div>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</div>
26 </body>
27 </html>

　　**瀏覽器兼容問題**：

　　　　在語句前加入：(如上例)

　　　　　　*-webkit-:支持safari、chrome

　　　　　　*-ms-：支持IE

　　　　　　*-o-:支持opera

　　　　　　*-moz-:支持Firefox

七、動畫

　　通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱
規定動畫的時長

　　動畫屬性：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>動畫</title>
 6     <style> 
 7         div{
 8             width:100px;
 9             height:100px;
10             background:red;
11             position:relative;
12             -webkit-animation:myfirst 5s;
13         }
14         
15         @-webkit-keyframes myfirst{
16             0%   {background:red; left:0px; top:0px;}
17             25%  {background:yellow; left:200px; top:0px;}
18             50%  {background:blue; left:200px; top:200px;}
19             75%  {background:green; left:0px; top:200px;}
20             100% {background:red; left:0px; top:0px;}
21         }
22     </style>
23 </head>
24 <body>
25     <div></div>
26 </body>
27 </html>

八、多列

1、多列屬性

2、事例：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>動畫</title>
 6     <style> 
 7         .newspaper{
 8             -webkit-column-count:3;
 9             -webkit-column-gap:40px;
10             -webkit-column-rule:4px outset #ff0000;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="newspaper">人民網北京2月24日電 (記者 劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。此次國內成品油價格調整幅度，是按照現行國內成品油價格形成機制，根據國際市場油價變化情況確定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復蘇前景向好以及中東局勢持續動盪等因素影響，國際市場原油價格先抑后揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美元和115美元以上。雖然近兩日價格有所回落，但國內油價掛鈎的國際市場三種原油連續22個工作日移動平均價格上漲幅度已超過4%，達到國內成品油價格調整的邊界條件。通知指出，這次成品油調價后，國家將按照已建立的補貼機制，繼續對種糧農民、漁業（含遠洋漁業）、林業、城市公交、農村道路客運（含島際和農村水路客運）等給予</div>
16 </body>
17 </html>

　　效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3 動畫總結 CSS3動畫總結學習(一) css3新屬性的總結 HTML5和css3的總結 CSS3總結一：border（邊框） animation CSS3動畫總結 CSS3總結七：變換（transform） css3動畫由淺入深總結總結CSS3新特性(Transform篇) 總結CSS3新特性(顏色篇)