div css3 border-radius 角丸 DIV 角丸画像角丸-CSSチュートリアル-php.cn

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

云罗郡主

リリース： 2018-10-16 14:29:03

転載

2753 人が閲覧しました

この記事が提供する内容は、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 コード

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