CSSで境界線を設定するには? Web ページのフロントエンドを開発する場合、Web ページ上の要素をより快適に見せるために、ボタンなどの丸い境界線を設定する必要があることがよくあります。では、丸い境界線を設定するにはどうすればよいでしょうか。この記事ではCSSで角丸枠を設定する方法を紹介します。
CSS で丸い境界線を設定する最も一般的で簡単な方法は、border-radius 属性を使用することです。
CSS の角丸には、border-radius (「境界線の半径」を意味します) という 1 つのプロパティを設定するだけで済みます。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な CSS 測定値 (em、ex、pt、px、パーセントなど) を使用できます。
丸い境界線を設定する CSS コード例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>効果は次のとおりです:
border-radius は同時に 1 ～ 4 つの値を設定できます。
値を設定すると、4 つのフィレットすべてがこの値を使用することになります。
CSSの丸枠コード: border-radius: 15px;
2つの値が設定されている場合、左上隅と右下隅は最初の値を使用することを意味します 値を指定すると、右上隅と左下隅には 2 番目の値が使用されます。
CSSの丸枠コード: border-radius: 15px 5px;
3つの値が設定されている場合、左上隅は最初の値を使用し、右上隅と左下隅は2番目の値を使用することを意味します値、右下隅では 3 番目の値 3 つの値が使用されます。
CSSの丸枠コード: border-radius: 15px 5px 25px;
4つの値が設定されている場合は、順に 左上隅、右上隅、右下隅、左下隅（時計回りの順）に対応します。
CSS 丸めボーダー コード: border-radius: 15px 5px 25px 0px;
border-radius は、スラッシュを使用して 2 番目の値セットを設定することもできます。最初の値のセットは水平方向の半径を表し、2 番目の値のセットは垂直方向の半径を表します。 2 番目の値セットも 1 ～ 4 個の値を同時に設定でき、適用ルールは最初の値セットと同じです。
4つの角丸を同時に設定するだけでなく、各角を個別に設定することもできます。 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 番目の値は垂直方向の半径を表します。
上記は CSS で丸い境界線を設定する方法です。CSS 境界線のプロパティについて詳しく知りたい場合は、CSS マニュアル を参照してください。
以上がCSSで丸い枠線を設定するにはどうすればよいですか? CSS（画像とテキスト）で丸い枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7681
15163914139352128625122929