コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS アウトライン スタイルのプロパティ

CSS アウトライン スタイルのプロパティ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2023-09-19 09:25:02
転載
1507 人が閲覧しました

CSS 轮廓样式属性

outline-style プロパティは、要素を囲む線のスタイルを指定します。次の値のいずれかをとります -

  • None - 境界線なし。 (輪郭幅: 0 に相当)
  • 実線 - 輪郭は実線です。
  • 点線 - 輪郭は一連の点です。
  • 点線 - アウトラインは一連の短い線です。
  • Double - アウトラインは 2 本の実線です。
  • 溝 - 輪郭はページに彫り込まれたように見えます。
  • リッジ - 溝のある輪郭のある外観。
  • 挿入 - アウトラインにより、ボックスがページに埋め込まれているように見えます。
  • はじめに - アウトラインを使用すると、ボックスがページに埋め込まれているように見えます。まるでキャンバスから飛び出してきたようなフレームです。
  • 非表示 - なしと同じ。

例

次のコードを実行して、outline-style 属性 -

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid outline.
      </p>
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>
ログイン後にコピー
を実装してみてください。

以上がCSS アウトライン スタイルのプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：CSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止するにはどうすればよいですか? 次の記事：Ember ハンドルバー テンプレートを作成するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2672
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2803
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2365
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2228
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2329
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート