ホームページ > 記事 > ウェブフロントエンド > css3でdiv要素にアウトラインを追加する方法の例
css3でdiv要素にアウトラインを追加する方法の例
- 黄舟オリジナル
- 2017-07-27 09:18:352166ブラウズ
css3のoutlineはdiv要素にアウトラインを追加します
スタイルをより美しくするために、div要素にアウトラインを適切に追加することができる場合があります。これは、outline 属性を通じて実現できます。
outline には次の属性値が含まれます。
outline-width: アウトラインの太さ。
この属性値には、thin、medium、thick、length の 4 つのパラメータが含まれます。
thin: 細いアウトラインを定義します。
medium: 中程度のアウトラインを定義します。
thick: 太いアウトラインを定義します。
length: アウトラインの太さを指定できます。この値は負の値にはできません。
outline-style: アウトラインのスタイル。
この属性の共通パラメータ:
none: none に設定すると、アウトラインは表示されません。
dotted: 点線のアウトライン、
dashed: 点線のアウトライン、
solid: 実線のアウトライン。
outline-color: アウトラインの色
この属性のパラメータ:
色の名前: (赤);
rgb カラー値: rgb(255,255,255);
16 進数のカラー値: #ff0000 ;
outline-offset: アウトラインとコンテナ間のオフセット値。この値が負の場合、コンテナ内にアウトラインが表示されます。
サンプルコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>无标题文档</title>
<style>
.aixuexi{
padding:20px;
position:fixed;
top:100px;
left:300px;
border:2px dashed #000;
width:100px;
height:100px;
line-height:100px;
background:#abcdef;
outline-width:10px;
outline-style:solid;
outline-color:#99FF00;
outline-offset:20px;
}
</style>
</head>
<body>
<div class="aixuexi"><a href="#">hello world</a></div>
</body>
</html>以上がcss3でdiv要素にアウトラインを追加する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。