CSS 角丸_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 角丸_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:54

オリジナル

1201 人が閲覧しました

1. サポートされているブラウザ

ブラウザのサポート

Firefox(2, 3+)	√
Google Chrome(1.0.154+…)	√
Google Chrome(2.0) .156+…)	√
Safari(3.2.1+ Windows)	√
Internet Explorer(IE7, IE8)	×
Opera 9.6	×

2. 用途と利点

従来の 角丸生成スキームでは、背景パターンとして複数の画像を使用する必要があります。 CSS3 の登場により、これらの画像の作成に時間を無駄にする必要がなくなり、他にも多くの利点があります:

* メンテナンスの負荷を軽減 。画像ファイルの生成、更新、Web ページのコードの記述といった作業はもう必要ありません。

* ウェブページのパフォーマンスを向上させます。不要な HTTP リクエストがなくなるため、Web ページの読み込みが速くなります。

* 視覚的な信頼性を高めます。特定の状況 (ネットワークの混雑、サーバーエラー、ネットワーク速度の低下など) では、背景画像のダウンロードに失敗し、視覚効果が低下することがあります。 CSS3ではこのようなことは起こりません。

を実装するには、CSS3 の角丸は 1 つの属性: border-radius (「境界線の半径」を意味します) を設定するだけです。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な CSS 測定値 (em、ex、pt、px、パーセントなど) を使用できます。

border-radius:50px;

ログイン後にコピー

この文は、各角丸の「水平半径」と「垂直半径」を同時に 50px に設定します

1 角丸を実現します

<!DOCTYPE html><html><head>   <title>css 圆角</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#test{   /*-moz-border-radius: 15px;   -webkit-border-radius: 15px; */   border-radius:15px;    border:1px solid #dedede;   margin: 50px;   width : 250px;   height: 50px;}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

2. 円を実現します

<!DOCTYPE html><html><head>   <title>css 圆角</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#circle { width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 dashed; /*-webkit-border-radius: 100px 100px 100px 100px; -moz-border-radius: 100px 100px 100px 100px;*/border-radius: 100px;} </style></head><body><div id="circle"></div></body></html>

ログイン後にコピー

効果は次のとおりです:

4. 異なるコーナー半径を実現します

1. 方法 1

border-radius 属性四隅に異なるラジアンの使用をサポートします。次のように 4 ラジアンを直接与えることができます:

border-radius:10px 20px 30px 40px;

ログイン後にコピー

左上、右上、右下、左下の順にフィレット半径が与えられます。つまり、左上隅の半径は 10px、右上隅の半径は 20px、右下隅の半径は 30px、左下隅の半径は 40px です。

<!DOCTYPE html><html><head>   <title>css 圆角</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#test{   border-radius:10px 20px 30px 40px;    border:1px solid #dedede;   margin: 50px;   width : 250px;   height: 50px;}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

効果は以下の通りです:

2、方法2

4つの角丸を同時に設定するだけでなく、それぞれの角を個別に設定することもできます。四隅に対応して、CSS3 は 4 つの個別のプロパティを提供します:

* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius

これら 4 つの属性は、同時に 1 ～ 2 つの値に設定できます。 の値が 1 に設定されている場合、水平半径が垂直半径 と等しいことを意味します。 が 2 つの値を設定する場合、最初の値は水平方向の半径を表し、2 番目の値は垂直方向の半径を表します。

<!DOCTYPE html><html><head>   <title>css 圆角</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#test{   border-top-left-radius: 20px 40px;   border:1px solid #dedede;   margin: 50px;   width : 250px;   height: 50px;}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

効果は次のとおりです:

注:

Safari と Chrome の初期バージョンは -webkit-border-radius 属性をサポートし、Firefox の初期バージョンは -moz-border- をサポートします。半径属性。

現在、互換性を確保するには、-moz-border-radius と border-radius を同時に設定するだけで済みます。

-moz-border-radius: 15px;
border-radius: 15px; (border-radius は上記の 3 つの末尾に配置する必要があります。そうでない場合は無効になる可能性があります)

ソースコード: http:// pan.baidu.com/s/1c0LRI4g

謝辞

: 読んでいただきありがとうございます！