CSS3 概要_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 概要_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

1. 特別な境界線

CSS3 を使用すると、丸い境界線を作成したり、長方形に影を追加したり、画像を使用して境界線を描画したりできます。境界線属性:

1. border-radius: 丸い境界線を作成します

border-radius 属性は、4 つの border-*-radius 属性を設定するために使用される省略形の属性です。

例:

rrree

2. box-shadow: 長方形に影を追加します

box-shadow ボックスに 1 つ以上の影を追加します。このプロパティは、影のコンマ区切りのリストで、それぞれ 2 ～ 4 の長さの値、オプションの色の値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

例:

 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>

ログイン後にコピー

3. border-image: 画像を使用して境界線を描画します

例:

 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>

ログイン後にコピー

2. 背景

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>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>

ログイン後にコピー

3. 背景画像の配置領域を指定します

背景画像は、コンテンツボックス、パディングボックス、またはボーダーボックス領域。（和背景クリップ一样）

三、文本效果

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         #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>

ログイン後にコピー

四、2D转换： CSS3 转换，我们能够对元素通进行移動、拡大縮小、回転、伸縮

移動; 回転(): 回転; スケール(): 傾き; マトリックス(): 行列

5. 3D 変換

rotateX();rotateY()

6. トランジション: CSS3 トランジションは、要素があるスタイルから別のスタイルに徐々に変化する効果です。

これを実現するには、次の 2 つを指定する必要があります:

* 効果を追加する CSS プロパティを指定します

**デバイスの互換性の問題を参照**:

追加: (上の例）

*-webkit-: safari、chrome

をサポート

*-o -: opera

をサポート

*-moz-: Firefox

をサポート

7. 少なくとも指定することで。次の 2 つの 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 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>

ログイン後にコピー

複数の列。

1. 複数列の属性

2. 例:

rre ee

効果: