CSS3で丸い枠線のスタイルを設定する理由-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS3で丸い枠線のスタイルを設定する理由

青灯夜游

Dec 16, 2021 am 11:56 AM

css3

スタイルは次のとおりです: 1. "border-radius: 半径値;"; 2. "border-radius: 半径値半径値;"; 3. "border-radius: 半径値半径値半径値; " ;4. "border-radius: 半径値半径値半径値半径値;".

CSS3で丸い枠線のスタイルを設定する理由

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

丸い境界線

##1. border-radius 属性の概要

要素に丸い境界線を追加します。要素への丸い境界線四隅が丸い（プロパティは継承されない）

2. 境界線半径の定義方法

border -radius 属性 border-radius では、四隅に同じ値を一括で設定する方法（省略属性）と、四隅の丸みのスタイルを個別に設定する方法（個別属性設定）の 2 つの定義方法があります。

(1) 個別の属性設定

border-radius: 4 つの境界線の角丸スタイルを同時に設定します;

border-top-right-radius: 右上隅の境界線の丸い角のスタイルを設定します;
border-bottom-left-radius : 左下隅の境界線の丸い角スタイルを設定します;
border-bottom-right-radius: 右下隅の境界線の丸い角スタイルを設定します;

注 [境界線の順序を乱すことはできません。たとえば、border-top-left-radius を border-left-top-radius として記述することはできません。属性は固定です。】

実際に操作してみると、両者の表現効果は同じであることがわかります。

(2) 略語属性

border-radius、Pay の 4 つのパラメータを設定します。順序関係に注意してください

1. 属性には 1 つの値のみを設定し、4 つの境界線の丸い角には同じ値が使用されます

  border-radius：20px     //四个边框圆角为20px

# #2、属性に 2 つの値を設定します。最初の値は左上隅と右下隅を設定し、2 番目の値は右上隅と左下隅を設定します。

3. 属性を 3 つの値に設定します。最初の値は左上隅に設定され、2 番目の値は右上隅と左下隅に設定され、3 番目の値は右下隅に設定されます

border-radius: 20px 50px    //左上角和右下角20px，右上角和左下角50px

##4 、属性に 4 つの値を設定します。最初の値は左上隅に設定され、2 番目の値は右上隅に設定され、3 番目の値は4 番目の値は右下隅に設定され、4 番目の値は左下隅 (時計回り) です。

border-radius: 20px 50px 5px  //左上角20px，右上角和左下角50px，右下角5px

#3. 水平半径と垂直半径をそれぞれ設定します

border-radius の構文

border-radius: {1-4} length /% / {1-4} length /%;

border-radius: 20px 50px 5px 100px  //左上角20px，右下角50px，右下角5px ，左下角100px

length は角の丸い値を定義します。左下を省略した場合は右上と同じになります。右下を省略した場合は左上と同じになります。 top-right を省略した場合は、top-left と同じになります。

border-radius のパラメータの数は 1 から 4 までの範囲です。ここでは、それぞれ水平半径と垂直半径の使用に注意する必要があります。まず、border-radius で 4 つの角の水平半径を設定し、次に境界半径を設定します。 set 4 角の垂直方向の半径。 ]

例:

border-radius: 20px 10px 40px / 25px 30px

は

div{border-radius: 20px 5px 100px/15px 30px;}

式効果

# と同等です。

##4. アプリケーション

border-radius を使用して円を作成します CSS3で丸い枠線のスタイルを設定する理由

ここに border-radius: r、r 要素の半径サイズを入力します (長さの単位を使用)、円を作成するには、r を要素の高さと幅の半分に設定します。

要素の高さと幅が等しい場合、この値のメソッドは円形になります。 コード

div{ border-top-left-radius: 20px 15px;
       border-top-right-radius: 5px 30px;
       border-bottom-right-radius: 100px 15px;
       border-bottom-left-radius: 5px 30px;
    }

パフォーマンス効果

要素の幅と高さが等しくないように設定し、幅: 200pxに変更すると; 高さ: 100px 、楕円として表示されます。

border-radius は円形および半円形の効果を実現します

border-radius には次のような機能があります: CSS3で丸い枠線のスタイルを設定する理由

给任何正方形设置一个足够大的border-radius，就可以把它变成一个圆形。

注意：当任意两个相邻的圆角的半径之和超过 borderbox 的尺寸之后，用户代理必须按照比例缩小各个边框半径所示用的值，直到它们不会相互重叠为止。

为什么叫border-radius ？

可能有些人会奇怪，border-radius到底由何得名。这个属性并不需要边框来参与工作，似乎叫做内容圆角更合适一些。

实际原因是 border-radius 是对元素borderbox 进行切圆角处理的。当元素没有边框时，可能还看不出差异；当它有边框时，则以边框外侧的拐角作为切圆角的基准。边框内侧的圆角会稍小一些（严格来说内角半径将是 max（0,border-radius-border-width））。

实例：

（一）、border-radius画圆形

div{
        width:200px;
        height:200px;
        border-radius:50%;
        background: #f775a9;
    }

表现效果：

要想实现一个圆形，首先要设置出一个正方形。
给border-radius设置任何大于或等于50%的百分数，都可以实现圆形效果。

例如：设置border-radius:70%，同样可以得到一个圆形。

（二）、border-radius实现四个方向的半圆

圆角相当是边框对内容的切割，圆角值设置的越大相当对元素切割越圆。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
    .box1{
        width:200px;height:100px;
        border-radius:400px 400px 0 0;
        background: #f775a9;
        float:left;
    }
    .box2{
        width:100px;height:200px;
        border-radius:300px 0 0 300px;
        background: #fabab8;
        float:left;
    }
    .box3{
        width:200px;
        height:100px;
        border-radius:0 0 200px 200px ;
        background: #aadfe6;
        float:left;
    }
    .box4{
        width:100px;height:200px;
        border-radius:0 100px 100px 0;
        background: #79e0c3;
        float:left;
    }
    .box5{
        width:100px;height:200px;
        border-radius:0 50px 50px 0;
        background: #acbfea;
        float:left;
    }
    </style>
</head>
<body>
<div>1</div>    
<div>2</div>  
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>

（学习视频分享：css视频教程）

以上がCSS3で丸い枠線のスタイルを設定する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。