outline

Try it

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgb(170 50 220 / 0.6);
border-radius: 2rem;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  padding: 0.75rem;
  width: 80%;
  height: 100px;
}

Thuộc tính thành phần

Thuộc tính này là viết tắt cho các thuộc tính CSS sau:

• outline-width
• outline-style
• outline-color

Cú pháp

/* style */
outline: solid;

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

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

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

/* Giá trị toàn cục */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

Thuộc tính outline có thể được chỉ định bằng một, hai hoặc ba giá trị liệt kê bên dưới. Thứ tự của các giá trị không quan trọng. Như với tất cả các thuộc tính viết tắt, bất kỳ giá trị con nào bị bỏ qua sẽ được đặt về giá trị ban đầu.

Giá trị

<'outline-width'>

Đặt độ dày của outline. Mặc định là medium nếu bị bỏ qua. Xem outline-width.

<'outline-style'>

Đặt kiểu của outline. Mặc định là none nếu bị bỏ qua. Xem outline-style.

<'outline-color'>

Đặt màu của outline. Mặc định là invert cho các trình duyệt hỗ trợ nó, currentColor cho các trình duyệt khác. Xem outline-color.

Mô tả

Outline là đường kẻ bên ngoài border của phần tử. Không giống như các vùng khác của hộp, outline không chiếm không gian, vì vậy chúng không ảnh hưởng đến bố cục tài liệu theo bất kỳ cách nào.

Có một số thuộc tính ảnh hưởng đến giao diện của outline. Có thể thay đổi kiểu, màu sắc và chiều rộng bằng thuộc tính outline, khoảng cách từ border bằng thuộc tính outline-offset, và góc bo tròn bằng thuộc tính border-radius.

Outline không bắt buộc phải là hình chữ nhật: Khi xử lý văn bản nhiều dòng, một số trình duyệt sẽ vẽ outline cho từng hộp dòng riêng biệt, trong khi các trình duyệt khác sẽ bao toàn bộ văn bản bằng một outline duy nhất.

Khả năng tiếp cận

Việc gán outline giá trị 0 hoặc none sẽ xóa kiểu tiêu điểm mặc định của trình duyệt. Nếu một phần tử có thể tương tác, nó phải có chỉ báo tiêu điểm hiển thị. Hãy cung cấp kiểu tiêu điểm rõ ràng nếu kiểu tiêu điểm mặc định bị xóa.

• How to Design Useful and Usable Focus Indicators
• WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible

Định nghĩa hình thức

Cú pháp hình thức

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto                  |
  <'border-top-color'>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<outline-line-style> = 
  none    |
  auto    |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Sử dụng outline để đặt kiểu tiêu điểm

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #ee7733;
  outline-offset: 4px;
  background: #ffffaa;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• outline-width
• outline-style
• outline-color
• border