CSSでborder-radiusを使用する方法-CSSチュートリアル-php.cn

CSSでborder-radiusを使用する方法

php中世界最好的语言

リリース： 2017-11-23 11:30:59

オリジナル

2370 人が閲覧しました

今日は、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を使用する方法

html編集コンバータ

HTMLにスペース文字を入力する方法

以上がCSSでborder-radiusを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。