Ngôn ngữ CSS - CSS Outline
Bài trước
Bài sau

Thuộc tính Outline

Thuộc tính outline định dạng các đường viền bao ngoài.

Ví dụ:

<html>  
<style type="text/css">  
.box {  
        background-color: #eee;  
        outline: 3px solid red;  
        border: 3px solid lightgreen;  
        padding: 5px 10px;  
}  
</style>  
<div class="box">Welcome to Hiệp Sĩ IT</div>  
</body>  
</html>

Xem ví dụ

Phân biệt Outline và Border

Nhắc đến Outline có thể khiến một số bạn nhầm lẫn nó với Border, tuy nhiên giữa hai thuộc tính này có các điểm khác nhau khá lớn như sau:

  1. Một outline là một đường được vẽ ngay bên ngoài cạnh đường viền của các phần tử. Các Outline không chiếm giữ phần không gian, bởi vì chúng luôn luôn được đặt trên một hộp chứa phần tử.
  2. Không giống border, bạn không thể xác định độ rộng, màu và style cho từng cạnh khác nhau bởi vì outline là một đường.
  3. Không giống border, outline không thay đổi kích cỡ và vị trí của phần tử.
  4. Outline không nhất thiết phải ở dạng hình chữ nhật.

Ví dụ:

<html>  
<style type="text/css">  
.box {  
        background-color: #eee;  
        border: 3px solid Lightgreen;  
        padding: 5px 10px;  
        outline-width: 3px;  
        outline-style: solid;  
        outline-color: red;  
}  
</style>  
<div class="box">Welcome to Hiệp Sĩ It</div>  
</body>  
</html>

Xem ví dụ

Ở ví dụ trên ta thấy 3 thuộc tính: 

Outline-width:Xác định độ rộng cho đường bao ngoài.

Outline-color: Định dạng màu sắc cho đường bao ngoài.

Outline-style: Kiểu loại outline như: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

Ví dụ:

<html>  
<style type="text/css">  
.box {  
        outline-color: red;  
        outline-width: 4px;  
        margin: 10px;  
        float: left;  
        border: 2px solid lightgreen;  
        padding: 5px 10px;  
}  
</style>  
<div class="box" style="outline-style: dashed;">Đây là outline dashed.</div>  
<div class="box" style="outline-style: dotted;">Đây là outline dotted.</div>  
<div class="box" style="outline-style: double;">Đây là outline double.</div>  
<div class="box" style="outline-style: groove;">Đây là outline groove.</div>  
<div class="box" style="outline-style: inset;">Đây là outline inset.</div>  
<div class="box" style="outline-style: outset;">Đây là outline outset.</div>  
<div class="box" style="outline-style: ridge;">Đây là outline ridge.</div>  
<div class="box" style="outline-style: solid;">Đây là outline solid.</div>  
</body>  
</html>

Xem ví dụ

Outline offset

Để tạo khoảng cách giữa border và outline ta dùng outline offset

Ví dụ:

<html>  
<style type="text/css">  
.box {  
        background-color: #eee;  
        outline: 3px solid red;  
        outline-offset: 6px;  
        border: 3px solid Lightgreen;  
        padding: 5px 10px;  
}  
</style>  
<div class="box">Welcome to Hiệp Sĩ It</div>  
</body>  
</html>

Xem ví dụ

 

 


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×