CSS outline

Posted on Edited on In Views: Disqus:

 

outline這個屬性的特性與用法非常像border，

而他也可以跟border一樣控制color、style、width，

用法大同小異，請直接參考border的使用來套在outline使用即可。

唯比較需要注意的是outline與border的模型關係如下，

 

像input tag在focus時預設有用到outline屬性，如下範例，我還特別把該樣式提取出來。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        input:focus, textarea:focus, select:focus {
            outline-offset: -2px;
        }

        :focus {
            outline: -webkit-focus-ring-color auto 5px;
        }
    </style>
</head>
<body>
    <input type="type" name="name" value="" />
    <input type="type" name="name" value="" />
</body>
</html>

注意，「-webkit-focus-ring-color」與「auto」似乎都不是正規值，

所以顯示的樣式也沒有照標準規範走，範例僅供參考。

 

各屬性介紹如下

一、outline-color

故名思義，就是指定outline的顏色值，範例如下

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            outline-style: dotted;
            outline-color: #00ff00;
        }
    </style>
</head>
<body>
    <p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>

outline也跟border一樣，該樣式若要正常動作，則一定要指定outline-style屬性才行。

 

二、outline-style

就是outline外型的選擇，其值可選擇的有

none(預設值)、hidden(基本上效果跟none一樣)、dotted、dashed、solid、double、groove、ridge、inset、outset

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            border: 1px solid red;
        }

            p.dotted {
                outline-style: dotted;
            }

            p.dashed {
                outline-style: dashed;
            }

            p.solid {
                outline-style: solid;
            }

            p.double {
                outline-style: double;
            }

            p.groove {
                outline-style: groove;
            }

            p.ridge {
                outline-style: ridge;
            }

            p.inset {
                outline-style: inset;
            }

            p.outset {
                outline-style: outset;
            }
    </style>
</head>
<body>

    <p class="dotted">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
    <p class="double">A double outline</p>
    <p class="groove">A groove outline</p>
    <p class="ridge">A ridge outline</p>
    <p class="inset">An inset outline</p>
    <p class="outset">An outset outline</p>
    <b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is
    specified.

</body>
</html>

畫面如下

 

三、outline-width

用來指定outline線條的寬度

<!DOCTYPE html>
<html>
<head>
    <style>
        p.two {
            border: 1px solid red;
            outline-style: dotted;
            outline-width: 10px;
        }
    </style>
</head>
<body>
    <p class="two">This is some text in a paragraph.</p>
    <p>
        <b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is ecified.
    </p>
</body>
</html>

 

四、outline-offset

指定outline外框的偏移值，可以為負值。

<!DOCTYPE html>
<html>
<head>
    <style>
        p.two {
            border: 1px solid red;
            outline-style: dotted;
            outline-width: 10px;
        }

        p.three {
            border: 1px solid red;
            outline-style: dotted;
            outline-width: 10px;
            outline-offset: 5px;
        }
    </style>
</head>
<body>
    <p class="two">This is some text in a paragraph.</p>
    <br />
    <p class="three">This is some text in a paragraph.</p>
    <p>
        <b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is ecified.
    </p>
</body>
</html>

 

五、outline

指的是outline的簡寫，語法為

outline: outline-color outline-style outline-width

<!DOCTYPE html>
<html>
<head>
    <style>
        p.two {
            border: 1px solid red;
            outline: blue dotted 10px;
        }
    </style>
</head>
<body>
    <p class="two">This is some text in a paragraph.</p>

    <p>
        <b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is ecified.
    </p>
</body>
</html>

或許你會覺得outline簡寫為什麼沒有包含outline-offset屬性？

我都試過了，就是沒有支援。