CSS3 境界効果

CSSとは#

CSS (Cascading Style Sheets の略) は、「カスケーディング スタイル シート」または「カスケーディング スタイル シート」と翻訳され、スタイル シートと呼ばれます。

CSSの主な目的#

これは主に HTML Web ページの外観やスタイルを設定するために使用されます。外観またはスタイル: HTML Web ページ内のテキストのサイズ、色、フォント、Web ページの背景色および背景画像。

CSS3 境界線

CSS3 境界線#

CSS3 を使用すると、PhotoShop などのデザイン ソフトウェアを使用せずに、丸い境界線を作成したり、長方形に影を追加したり、画像を使用して境界線を描画したりできます。

次の境界プロパティについて学習します: border-radius、box-shadow、border-image。

1. 丸い境界線 border-radius#

CSS3 では、角を丸くするために border-radius プロパティが使用されます。

1.1. border-radius 構文#

基本的な書き方は以下の通りです。

左上隅を設定する

border-top-left-radius:10px;

右上隅を設定する

border-top-right-radius:10px;

左下隅を設定する

border-bottom-left-radius:10px;

左下隅を設定する

border-bottom-right-radius:10px;

四隅の速記設定

実行順序は次のとおりです: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;

4つのコーナーの値が均一になるように設定する

border-radius:10px;

支持率

border-radius:100%;

サポートしてください

border-radius:2em;

サポートされている操作

border-radius:30px/30px; /*支持加和除其余的不支持*/

JavaScript 構文

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2 ブラウザの互換性#

-webkit: Chrome や Safari などの Webkit ベースのブラウザ、プライベート属性、またはカーネル識別コードを表します。

-webkit-border-radius:5px; -moz: Firefox ブラウザのプライベート属性またはカーネル識別コードを表します。

-moz-border-radius:5px;

ms は IE ブラウザのプライベート属性またはカーネル識別コードを表します。

-ms-border-radius: 5px;

-o- は、Opera ブラウザのプライベート属性またはカーネル識別コードを表します。

-o-境界線の半径: 5px;

IE9+、Firefox 4+、Chrome、Safari 5+、Opera は border-radius プロパティをサポートしています。

境界線の半径:10px;

要約する

上記は私が紹介した CSS3 ボーダー効果です。お役に立てれば幸いです。ご質問があれば、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!