ホームページ  >  記事  >  ウェブフロントエンド  >  CSSのoutline-widthプロパティの使い方

CSSのoutline-widthプロパティの使い方

silencement
silencementオリジナル
2019-05-27 15:58:293183ブラウズ

CSSのoutline-widthプロパティの使い方

css のアウトライン幅属性の定義と使用法

1. CSS では、アウトライン幅属性は、アウトラインの幅を設定するために使用されます。アウトライン。いわゆるアウトラインは、境界線の外側にある要素の周囲に描かれた線です。これは要素のサイズの一部ではないため、要素の幅と高さの属性にはアウトラインの幅は含まれません。アウトラインはスペースを取らず、長方形でなくてもよいという点で境界線とは異なります。

2. 要素アウトラインの複数の属性を同時に設定する必要がある場合は、アウトライン省略属性を使用することをお勧めします。アウトライン属性を使用すると、コードが簡素化され、アウトラインの複数の属性を 1 つで定義できます。設定できるアウトライン属性は、それぞれ「はい」(順に)、outline-color、outline-style、outline-width です。

css アウトライン幅属性は、アウトラインスタイル属性と一緒に使用する必要があります。これは理解しやすいです。要素にはアウトラインが必要です (アウトライン スタイル属性はアウトライン スタイルを定義します)。アウトラインの幅を設定します。

css アウトライン幅属性の構文形式

css 構文: アウトライン幅:細/中/太/長さ/継承

JavaScript 構文: object.style.outlineWidth="thin"

属性値の説明

1.thin: 細いアウトラインを定義します

2.medium: 中程度のアウトラインを定義します(デフォルト)

3.thick: 太いアウトラインを定義します

4.length: アウトラインの太さの値を指定できます

5.inherit: アウトラインを継承します。親要素 - width 属性の値

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css outline-width属性设置轮廓宽度</title>
<style type="text/css">
div{width:300px;height:60px;border:1px solid #000;margin-top:15px;outline-style:dotted;}
#div1{ outline-width:thin;}/*细轮廓*/
#div2{ outline-width:thick;}/*粗轮廓*/
#div3{ outline-width:8px;}/*自定义轮廓宽度为8px*/
</style>
</head>
<body>
<div id="div1">thin</div>
<div id="div2">thick</div>
<div id="div3">8px</div>
</body>
</html>

実行結果

CSSのoutline-widthプロパティの使い方

以上がCSSのoutline-widthプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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