ホームページ > 記事 > ウェブフロントエンド > div css3 border-radius 角丸 DIV 角丸 画像 角丸
div css3 border-radius 角丸 DIV 角丸 画像 角丸
- 云罗郡主転載
- 2018-10-16 13:59:402702ブラウズ
この記事が提供する内容は、div css3 border-radius DIV の角丸画像に関するもので、必要な友人は参照できます。ご参考になれば幸いです。
1. css3 の単語と文法構造
1. pCSS3 の丸められた単語:
border-radius
2. 文法構造##
p{border-radius:5px} p オブジェクト ボックスの四隅を 5 ピクセルの角丸に設定します。
p{border-radius:5px 0;} p オブジェクト ボックスの左上隅と右下隅を 5 ピクセルの角丸に設定し、他の 2 つの角を設定します。
p{border-radius:5px 5px 0 0;} p オブジェクト ボックスの左上隅と右上隅を 5px 丸く設定し、他の 2 つの角は 0 で丸めません。説明: border-radius: 3px 4px 5px 6px
は、オブジェクトの左上隅を 3px 丸め、右上隅を 4px 丸め、右下隅を 5px 丸め、そして左下隅を6px丸めます。
4. CSS 角丸属性分析表
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>盒子左上角和右上角对象圆角测试</div> <div class="box">DIV盒子圆角</div> <div>盒子对象个角圆角测试</div> <div class="box3">DIV盒子圆角</div> <p> </p> <div>图片对象圆角测试</div> <div class="box2"><img src="images/logo.gif" /></div> </body> </html>2. ケースの 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}3)、最初の順序角の丸い効果を確認するには、BOX ボックスで境界線のスタイルを設定し、角の丸いスタイルも設定します。 border-radius: 5px 5px 0 0; 左上隅と右上隅の丸い角を設定します。 2)、2番目のBOX3ボックスの背景色を設定し、角丸スタイルborder-radius: 5px 0を設定します。左上隅と右下隅の角丸を設定します。
3 ）、3つ目 box2ボックス内の画像imgに角丸スタイルborder-radius:5pxを設定し、四隅を丸く設定します。
上記は完全な紹介です
CSS3 ビデオ チュートリアルについて詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がdiv css3 border-radius 角丸 DIV 角丸 画像 角丸の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はdivcss5.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。