Hướng dẫn và ví dụ CSS Outline

CSS Outline
CSS outline-style
CSS outline-width
CSS outline-color
CSS outline-offset

1. CSS Outline

CSS Outline tạo ra một thứ gần giống như đường viền (border), nó được vẽ bao quanh phần tử và bên ngoài viền, nó giúp cho phần tử nổi bật hơn.

Khác với viền (border), Outline không chiếm không gian xung quanh phần tử. Theo như đặc tả Outline không phải là một hình chữ nhật mặc dù bạn luôn cảm thấy nó như một hình chữ nhật.

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Ví dụ:

Outline được vẽ bao quanh phần tử, và bên ngoài viền, nó không chiếm không gian xung quanh phần tử, vì vậy nếu Outline có chiều rộng lớn nó có thể bao phủ, chồng chéo (overlap) lên nội dung khác bên ngoài phần tử. Hãy xem ví dụ sau:

Some content 1
<div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;">
    border: 3px solid gray; <br/>
    outline: AliceBlue  solid 10px;
</div>
Some content 2

Cú pháp của CSS Outline:

/* Syntax:  */
outline: color  style width;
/* style: required */

Hoặc:

outline-color: color;
outline-style: style;
outline-width: width;

2. CSS outline-style

CSS outline-style được sử dụng để chỉ định kiểu dáng của Outline, nó có thể nhận một trong các giá trị dưới đây:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Các giá trị groove, ridge, inset, outset tạo ra một 3D Outline bao quanh phần tử, hiệu ứng 3D phụ thuộc vào giá trị của CSS outline-color.

Trong ví dụ dưới đây tôi sét đặt giá trị CSS outline-width là 10px, một giá trị đủ lớn giúp bạn dễ dàng thấy sự khác biệt của các Outline-style khác nhau.

outline-style-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-color: green;
           outline-width: 10px;
           margin: 30px 5px;
         }
         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>
      <h3>CSS outline-style</h3>

      <p class="dotted">
          dotted - A series of round dots.
      </p>
      <p class="dashed">
        dashed - A series of square-ended dashes.
      </p>
      <p class="solid">
         solid - A single line segment.
      </p>
      <p class="double">
        double - Two parallel solid lines with some space between them.
        When using this value, the border-width value determines the
        sum of the lines and the space between them.
      </p>
      <p class="groove">
          groove - Looks as if it were carved in the canvas.
      </p>
      <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p>
      <p class="inset">
        inset - Looks as if the content on the inside of the border is sunken into the canvas.
        Treated as ridge in the collapsing border model.
      </p>
      <p class="outset">
        outset - Looks as if the content on the inside of the border is coming out of the canvas.
        Treated as groove in the collapsing border model.
      </p>
   </body>
</html>

none vs hidden

CSS outline-style:none và CSS outline-style:hidden là giống nhau, nó làm cho phần tử không có Outline.

3. CSS outline-width

CSS outline-width chỉ định chiều rộng của Outline, nó có thể nhận một trong các giá trị sau:

thin	Cụ thể là 1px.
medium	Cụ thể là 3px.
thick	Cụ thể là 5px.
px, pt, cm, em,...	Một con số cụ thể, chẳng hạn 1px, 1pt, 2cm, 2em,...

outline-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: outset;
           outline-color: green;
           margin: 30px 5px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-width</h3>
      <p style="outline-width:1px">
          outline-width:1px
      </p>
      <p style="outline-width:5px">
        outline-width:5px
      </p>
      <p style="outline-width:10px">
         outline-width:10px
      </p>
   </body>
</html>

4. CSS outline-color

CSS outline-color được sử dụng để thiết lập mầu sắc cho Outline. Các giá trị của nó có thể là:

name	Tên của mầu sắc, chẳng hạn red, blue, green,..
RGB	Một giá trị RGB, chẳng hạn rgb(255,10,20).
Hex	Một giá trị Hex, chẳng hạn #ff0000.
invert	Trình duyệt sẽ tự động cung cấp một mầu phù hợp, đảm bảo rằng nó được nhìn thấy (Không bị nhầm lẫn với bất kỳ mầu nền nào xung quanh phần tử).

Ví dụ:

outline-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: inset;
           outline-width: 10px;
           margin: 30px 15px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-color</h3>
      <p style="outline-color:yellow">
          outline-color:yellow;
      </p>
      <p style="outline-color:blue">
        outline-color:blue;
      </p>
      <p style="outline-color:green">
         outline-color:green;
      </p>
   </body>
</html>

5. CSS outline-offset

CSS outline-offset được sử dụng để tạo ra khoảng cách giữa Outline và các viền (border) của phần tử.

Các giá trị của nó có thể là:

Một giá trị cụ thể, chẳng hạn 1px, 2em, 3cm,...
initial
inherit

Giá trị mặc định của outline-offset là 0, điều đó có nghĩa là mặc định Outline được vẽ sát với viền của phần tử.

outline-offset-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline</title>
    <meta charset="UTF-8"/>
    <style>
       .my-div {
          border: 3px solid gray;
          outline: green dotted 10px;
          padding:10px;
          margin: 25px;
          outline-offset: 10px;
       }
    </style>
</head>
<body>
    <h3>CSS outline-offset</h3>
    <div class ="my-div">
        border: 3px solid gray; <br/>
        outline: green dotted 10px; <br/>
        padding:10px; <br/>
        margin: 40px; <br/>
        outline-offset: 10px;
    </div>
</body>
</html>