CSS3で扇形を描く方法-CSSチュートリアル-php.cn

CSS3で扇形を描く方法

藏色散人

リリース： 2022-12-30 11:11:40

オリジナル

5389 人が閲覧しました

CSS3 で扇形を描画する方法: まず HTML サンプルファイルを作成し、次に指定した div に border-radius 属性を追加し、最後に「border-radius:80px 0 0;」のような複合属性を設定します。」。

CSS3で扇形を描く方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS はますます強力になっています。CSS を使用すると、さまざまな単純な図形を描くことができ、画像表示の代わりに使用できます。この共有は主に円や扇形を描くために使用されます。その方法を見てみましょうcssで扇形を描画します。

css で扇形を描画します:

<html>
<head>
<style type="text/css">
div{
 border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS3で扇形を描く方法

実装原則: 左上の角は丸く、その他の角は丸くします。 3つの角が丸くなっています直角です: 左上の角の値は幅と高さと同じで、他の3つの角の値は変更されません(0に等しい)。

border-radius 属性は、最大 4 つの border -*- radius 属性を指定できる複合属性です。

構文:

border-radius: 1-4 length|% / 1-4 length|%;

ログイン後にコピー

4 つの値の順序各半径は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

属性値:

length は曲線の形状を定義します。

% % を使用して角の形状を定義します。

推奨: css ビデオチュートリアル

以上がCSS3で扇形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。