ホームページ >ウェブフロントエンド >htmlチュートリアル >css3におけるresize属性の役割を詳しく解説(コード付き)
この記事では、css3 の resize 属性の役割についての詳しい説明 を中心に紹介します。
Web ページをデザインするときは、ユーザー エクスペリエンスを考慮する必要があります。 CSS が Web ページのスタイルとレイアウトを制御するために使用されることは誰もが知っています。 CSS3 は最新の CSS 標準です。
CSS3 では、新しいサイズ変更属性など、ユーザー エクスペリエンスを大幅に向上させる新しい属性がいくつかあります。
おすすめの参考関連ビデオチュートリアル: 「CSS3 チュートリアル 」
以下では、css3 の resize 属性について、具体的なコード例とともに詳しく紹介します。効果###。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3中resize属性的用法示例</title> <style> div { border:3px solid #ff3844; padding:10px 20px; width:200px; resize:both; overflow:auto; } </style> </head> <body> <div>css3中resize属性的作用:能够规定用户是否可以自由调整元素的尺寸!</div> </body> </html>ブラウザ経由でアクセスすると、最終的な効果は次のようになります: 上記のコードをテストのためにローカルに直接コピーして貼り付けることができます。 div 属性にsizeを追加し、値を両方に設定します。 マウスを右下隅にドラッグすると、境界線要素とテキスト要素が水平方向または垂直方向に自由に拡大縮小でき、それに応じてテキストフィールドのサイズを変更できることがわかります。私たちの要件に。これは、resize 属性を使用して要素のサイズを変更できることも示しています。 同時に、この div に overflow 属性を追加しないと、resize 属性があっても効果がなくなることに注意してください。ローカルでテストできます。したがって、サイズ変更属性は、オーバーフロー属性とサイズ変更属性が同時に設定されている場合にのみ効果があります。もちろん、オーバーフロー値は自動、非表示、またはスクロールにすることができます。 以下は、サイズ変更のオプション値の概要です。
resize 属性の役割について詳しく説明したもので、非常にシンプルでわかりやすいと思います。困っている友達の役に立ちます!
以上がcss3におけるresize属性の役割を詳しく解説(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。