ホームページ > 記事 > ウェブフロントエンド > CSSのアウトラインを詳細に分析

CSSのアウトラインを詳細に分析

黄舟オリジナル: 2017-07-27 09:15:011832ブラウズ

説明:

要素を強調表示できる要素の周囲に描画される線は、

属性では使用できません。 Compositeプロパティ輪郭は境界線の外側に描画され、必ずしも長方形であるとは限りませんoutline-color オブジェクトの外側の線の輪郭の色を設定または取得しますcolor: カラーオブジェクトの外側の線の輪郭のスタイルを設定または取得します none: デフォルト値 dashed: 点線の輪郭 double: 二重線外側の輪郭オブジェクトの外側の線のアウトラインの幅を設定または取得します medium: デフォルトの幅 thick: デフォルトの幅より大きいWidth例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        
        span
        {
        	border:solid 1px red;
        	display:block;
        	width:200px;
        }
        
        .span1
        {
        	outline-style:dotted;
        }
        
        .span2
        {
        	outline-style:dashed;
        }
        
        .span3
        {
        	outline-style:groove;
        }
        
        .span4
        {
        	outline-style:ridge;
        }
        
        .span5
        {
        	outline-style:inset;
        }
        
        .span6
        {
        	outline-style:outset;
        }
    
    </style>
</head>
<body>
    <span class="span1">111111111</span><br />
    <span class="span2">222222222</span><br />
    <span class="span3">333333333</span><br />
    <span class="span4">444444444</span><br />
    <span class="span5">555555555</span><br />
    <span class="span6">666666666</span>
</body>
</html>

説明	備考	outline
outline :outline- color\|\|outline-style\|\|outline-width
invert: デフォルト値、背景の逆色を使用しますcolor		outline-style
dotted: 点線の輪郭	solid: 実線の輪郭	groove:outline-colorの値に応じて3D溝の外輪郭を描画 ridge:outline-colorの値に応じて3D凸の溝の外輪郭を描画 inset:outline-colorの値に応じて3D凹の外輪郭を描画-color outset:outline-color の値に従って 3D 凸エッジのアウトラインを描画します outline-width
thin。 : デフォルトの幅より小さい	length: 長さ

Firefox での効果

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

声明：

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

前の記事：CSS の Behavior 属性とその使用例の紹介次の記事：CSS の Behavior 属性とその使用例の紹介

続きを見る