ホームページ > 記事 > ウェブフロントエンド > CSS3 概要_html/css_WEB-ITnose
CSS3 概要_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:44924ブラウズ
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 変換
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>
複数の列。
2. 例:
rre ee
効果: