CSS3の角丸の紹介と応用スキル-htmlチュートリアル-php.cn

CSS3の角丸の紹介と応用スキル

PHP中文网

リリース： 2016-11-30 23:59:39

オリジナル

1494 人が閲覧しました

*以下のテクニックはすべて Lea Verou 著「CSS Secrets」から派生したものです

適応楕円と角丸の構築

CSS 上で円を構築するには、border-radius 属性値を辺の長さの半分に設定するだけです。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>border-radiustitle>
<style>
.borderRadius{
display: inline-block;
background: #fb3;
min-width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px; 
/* 边长的一半 */box-sizing: border-box;
padding:0 5px;
}<style>
<head>
<body>
<p class="borderRadius">   
<p class="innerTxt">p>p>body>html>

ログイン後にコピー

表示効果は次のとおりです:

上記のレイアウト innerTxt にコンテンツを追加しすぎると、次のような効果が得られます:

適応楕円が必要な場合したがって、境界半径は固定値であってはなりません。境界半径を 50% に設定すると、表示効果は次のようになります:

これは適応楕円になります。

ここでは、border-radius のプロパティを包括的に紹介します。border-radius の展開式は、border-top-left-radius、border-bottom-right- です。半径、border-bottom-left-radius。

これにはあまり知られていない機能もあります: border-radius は水平方向と垂直方向の半径を個別に指定できます。スラッシュ (/) を使用して 2 つの値を区切るだけです。円フィレットは水平方向と垂直方向の半径が等しいため、結合できます)。

これらの特性を組み合わせると、border-radius:50%; の詳細な展開は border-radius:50% 50% 50% 50%/50% 50% 50% 50% となるはずです。

次に、想像力を駆使して、既知のフィレット特性に基づいてさまざまなグラフィックスを構築します。

border-radius: 50% / 100% 100% 0 0 (角の半径が4未満の場合、cssが自動的に繰り返してくれます)

border-radius: 100% 0 0 100% / 50 % ;

border-radius: 100% 0 0 0 / 100% 0 0 0;

Candy Button

実際に適用する際は、丸い角に加えて、想像力を働かせれば、かわいいキャンディーボタンのエフェクトを構築できます。

.borderRadius{display: inline-block;background: rgba(255,160,220,.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 200px;height: 100px;line-height: 200px;
border-radius: 50% 10% / 100% 10%;
        }

ログイン後にコピー

.borderRadius{display: inline-block;background: rgba(157, 255, 127, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% 20% 12% 12%/ 80% 80% 12% 12%;
        }

ログイン後にコピー

.borderRadius{display: inline-block;background: rgba(167, 255, 250, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% / 50%;
        }

ログイン後にコピー