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="/static/imghwm/default1.png"  data-src="图片/5.png"  class="lazy" / alt="CSS3 概要_html/css_WEB-ITnose" ><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="/static/imghwm/default1.png"  data-src="图片/6.png"  class="lazy" / alt="CSS3 概要_html/css_WEB-ITnose" >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 id="文本阴影效果">文本阴影效果</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

効果:

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。