CSS3 角丸_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 角丸_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

CSS3 の丸い border-radius もよく使われます。角が丸いので、たくさんの写真を保存できます :)

構文:

border-radius: none {1,4} [/ {1,4} ]?

注: 長さに負の値を指定することはできません。 border-radius は省略されたメソッドです。「/」の前後の値が両方存在する場合、「/」の前の値が水平方向の半径を設定し、「/」の後の値が垂直方向の半径を設定します。「/」がなければ、水平半径と垂直半径は等しくなります。また、その4つの値は左上、右上、右下、左下の順に設定されます。

簡単な例:

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px;-moz-border-radius:25px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

写真:

2 つの値を設定する場合、反対側の角の値は同じで、左上と右下が最初の値をとり、他の 2 つは同じになります。角は他の値を取ります。

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px 50px;-moz-border-radius:25px 50px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

効果:

さらに、各コーナーの水平半径と垂直半径を個別に設定できます:

border-radius:15px 30px / 20px 10px;

同等:

border-top-left-radius:15px 20px；border-bottom-right-radius:15px 20px;border-top-right-radius:30px 10px;border-bottom-left-radius: 30px 10px;

効果:

さらに、フィレット半径境界線の厚さが境界線の厚さ以下の場合、内側のフィレットは正方形になります。これもわかりやすいです。例:

border:20px solid #a1a1a1;border-radius:20px;

効果:

フィレットの半径が境界線の厚さよりも大きい場合、境界線の内側にも丸い角の効果が生じます:

border:10px solid #a1a1a1;border-radius:20px;

効果:

丸い角を使用して円を描くことができます:

<!DOCTYPE html><html><head><style> #radius{text-align:center;margin:50px auto;width:0;height:0;border:100px solid #a1a1a1;border-radius:100px;}</style></head><body><div id="radius"></div></body></html>

効果:

CSS3 ドラえもんを覚えていますか?角を丸くして描きました。

声明

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

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。