ホームページ > 記事 > ウェブフロントエンド > CSS3の角丸の紹介と応用スキル
CSS3の角丸の紹介と応用スキル
- PHP中文网オリジナル
- 2016-11-30 23:59:391487ブラウズ
*以下のテクニックはすべて 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:
.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%;
}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。