CSS基礎学習16：CSSボックスモデル補足border-radiusattribute_html/css

CSS基礎学習16：CSSボックスモデル補足border-radiusattribute_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:10

オリジナル

1341 人が閲覧しました

CSS ボックスモデルには多くのコンテンツと属性があり、CSS は更新と新しい属性の追加を行っています。今日は、CSS3 の新しいボックスモデルの

ボーダーのコンテンツについて説明します。半径属性。

border-radius 属性は、要素の境界線を設定して丸い角を追加します。実際、境界線なしで丸い角を追加することもできます。ただし、表示される場合は、背景色または枠線を追加する必要があります。

可能な値: xpx; フィレットは xpx、半径 xpx の 4 分の 1 円です。

構文形式は次のとおりです:

border-radius: apx bpx cpx dpx; 時計回り。 a=b=c=d の場合、border-radius:apx;

これは非常に抽象的ですが、例を使って説明しましょう

例 1: 境界線と背景色のない div に、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS演示</title><style type="text/css">#test {width:300px;height:200px;background-color:#FFFF00;border-radius:10px;line-height:200px;/*设置行高相同，便于居中*/text-align:center;}</style></head><body><div id="test">攻城课堂</div></body></html>

ログイン後にコピー

操作の結果は次のようになります:

例 2: 2 ピクセルの緑色の実線と背景色を持つ div に、ボーダーの角丸属性を追加します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS演示</title><style type="text/css">#test {width:300px;height:200px;background-color:#FFFF00;border:#00FF00 solid 2px;/*增加的边框*/border-radius:10px;line-height:200px;/*设置行高相同，便于居中*/text-align:center;}</style></head><body><div id="test">攻城课堂</div></body></html>

ログイン後にコピー

実行結果は次のとおりです:

私たちが閲覧するほとんどの Web ページには、さまざまな角の丸い画像が必ず表示されますが、その多くは PS によって処理されていないため、非常に多くの

写真を表示することも不可能です。 1 つずつカットして処理するため、スタイル設計にボックスモデルの border-radius 属性を使用できます。これにより、

予期せぬ効果が得られ、非常に便利で簡潔になります。それでは例を見てみましょう。

アウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトいくつかの円形の画像も、border-radius の値を設定するだけで簡単に実装できます。画像の高さと幅の半分に属します。正方形または長方形にすることができます。设：例 4: 画像を円形に設定します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS演示</title><style type="text/css">img {display:block;margin-top:50px;width:450px;height:300px;}#img_1 {border-radius:15px;}</style></head><body><img src="10.jpg" /><hr/><img id="img_1" src="10.jpg" /></body></html>

ログイン後にコピー

の実行結果:

もちろん、単一の丸い角を設定することもできます。多すぎなければ、これは過度ではありません。これを設定するには、次の属性を使用する必要があります。 using の ‐ to ‐ ‐‐‐‐‐‐ border-top-right-radius:

border- lower-right-radius:表示左下角

border-bottom-left-radius: 表示右下角

我们找个图来看效果：同時に設置各边框の度合いと色の異なる

ただCSSを与えるコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS演示</title><style type="text/css">img {display:block;width:300px;height:300px;}#img_1 {border-radius:150px;}</style></head><body><img src="6.jpg" /><hr/><img id="img_1" src="6.jpg" /></body></html>

ログイン後にコピー

レンダリング: