outline-color

Try it

outline-color: red;

outline-color: #32a1ce;

outline-color: rgb(170 50 220 / 0.6);

outline-color: hsl(60 90% 50% / 0.8);

outline-color: currentColor;

<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 {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Cú pháp

/* Giá trị <color> */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

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

Thuộc tính outline-color được chỉ định là bất kỳ một trong các giá trị liệt kê bên dưới.

Giá trị

<color>

Màu của outline, được chỉ định là <color>.

Đặc tả cũng liệt kê một giá trị bổ sung là auto, hiện không được hỗ trợ trong bất kỳ trình duyệt nào. Khi được triển khai, auto sẽ tính toán thành currentColor trừ khi outline-style được đặt thành auto, thì nó sẽ tính toán thành accent color.

Mô tả

Outline là đường kẻ được vẽ xung quanh một phần tử, bên ngoài border. Không giống như border của phần tử, outline được vẽ bên ngoài khung của phần tử và có thể chồng lên nội dung khác. Mặt khác, border sẽ thực sự thay đổi bố cục của trang để đảm bảo nó vừa vặn mà không chồng lên bất cứ thứ gì khác (trừ khi bạn đặt nó rõ ràng để chồng lên).

Thường tiện hơn khi sử dụng thuộc tính viết tắt outline khi xác định giao diện của outline.

Khả năng tiếp cận

Kiểu tiêu điểm tùy chỉnh thường liên quan đến việc điều chỉnh thuộc tính outline. Nếu màu của outline được điều chỉnh, điều quan trọng là phải đảm bảo tỷ lệ tương phản giữa nó và nền mà outline được đặt trên đủ cao để những người có thị lực kém có thể nhận ra nó.

Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng của các giá trị màu văn bản và nền. Để đáp ứng Hướng dẫn Tiếp cận Nội dung Web (WCAG) hiện tại, cần tỷ lệ 4,5:1 cho nội dung văn bản và 3:1 cho văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 18,66px và đậm trở lên, hoặc 24px trở lên.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

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

Cú pháp hình thức

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

<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ụ

Đặt outline màu xanh đặc

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid; /* Set the outline width and style */
  outline-color: blue; /* Set the outline color */
  margin: 5px;
}

Kết quả

Đặc tả

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

Xem thêm

• outline
• outline-width
• outline-style
• Kiểu dữ liệu <color>
• Các thuộc tính liên quan đến màu khác: color, background-color, border-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, và column-rule-color