ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでborder-radiusを使用する方法
CSSでborder-radiusを使用する方法
- php中世界最好的语言オリジナル
- 2017-11-23 11:30:592377ブラウズ
今日は、border-radius、border-radiusの使用方法、border-radiusのプロパティを紹介します。以下に小さなケースを見てみましょう。
DIVCSS3 丸め単語: border-radius
文法構造
p{border-radius:5px}
DIV オブジェクトボックスの四隅に 5 ピクセルの丸め効果を設定します
p{border-radius:5px 0;}
DIV オブジェクト ボックスの左上隅と右下隅を 5px の丸い角に設定します。他の 2 つの角は 0 で丸めません
p{border-radius:5px 5px 0 0;}DIV オブジェクト ボックスの左上隅と右上隅を設定します。角は 5px 丸く、他の 2 つの角は 0 で丸めません説明: border-radius: 3px 4px 5px 6px は、オブジェクトの左上隅を 3px の角丸に、右上隅を 4px の角丸に、右下隅を 5px の角丸に、左下隅は 6px の角丸にします。 CSS3の角丸ケース CSS3の角丸を練習するために、2つのDIVボックスと1つのケースの HTML コード
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>盒子左上角和右上角对象圆角测试</p> <p class="box">DIV盒子圆角</p> <p>盒子对象个角圆角测试</p> <p class="box3">DIV盒子圆角</p> <p> </p> <p>图片对象圆角测试</p> <p class="box2"><img src="images/logo.gif" /></p> </body> </html>ケースの CSS コード:
.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto}
.box2 img{border-radius:5px}
.box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}ケースの説明1) 角丸効果を確認するために、最初のボックス ボックスで境界線のスタイルを設定し、角丸スタイルの境界半径も設定します。 : 5px 5px 0 0; 左上隅と右上隅を丸めるように設定します。 2)、2番目のBOX3ボックスの背景色を設定し、角丸スタイルborder-radius:5px 0を設定し、左上隅と右下隅の角丸を設定します3)、 box2 ボックスの image img Corner style border-radius:5px で、四隅がすべて丸くなるように設定します。 border-radius についてはたくさんの知識がありますので、興味のある方は自分で試してみてください。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連記事:
以上がCSSでborder-radiusを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLテーブルスタイル次の記事：HTMLテーブルスタイル