div css3 border-radius 角丸 DIV 角丸 画像 角丸

この記事が提供する内容は、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 角丸属性分析表

2. CSS3 角丸ケース

pCSS5 では、2 つの p ボックスと 1 つの画像に角丸を設定します CSS3 角丸の練習。

1. ケースの HTML コード

 nbsp;html> 
 
 
<meta> 
<title>对象圆角 在线演示 DIVCSS5 VIP</title> 
<link> 
<!-- www.divcss5.com --> 
 
 
<div>盒子左上角和右上角对象圆角测试</div> 
<div>DIV盒子圆角</div> 
<div>盒子对象个角圆角测试</div> 
<div>DIV盒子圆角</div> 
<p> </p> 
<div>图片对象圆角测试</div> 
<div><img  src="/static/imghwm/default1.png" data-src="images/logo.gif" class="lazy" alt="div css3 border-radius 角丸 DIV 角丸 画像 角丸" ></div> 
 

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 サイトの他の関連記事を参照してください。