Đường viền màu CSS là gì?

Phác thảo là một đường được vẽ xung quanh một phần tử. Nhưng nó khác với thuộc tính đường viền. Thuộc tính chiều rộng và chiều cao của phần tử không bao gồm chiều rộng đường viền vì đường viền không được coi là một phần của kích thước phần tử

Thuộc tính outline-color không hoạt động nếu bạn sử dụng nó một mình. Nó phải được sử dụng với các thuộc tính phác thảo hoặc kiểu phác thảo

Hệ thập lục phân, RGB, RGBA, HSL, HSLA hoặc tên màu có thể được đặt làm giá trị cho thuộc tính màu viền. Xem các giá trị màu trong phần màu HTML

Màu đường viền, kết hợp với kiểu đường viền và chiều rộng đường viền, cũng có thể được chỉ định bằng thuộc tính tốc ký outline

Những giá trị khả thi

object.style.outlineColor = "red";

object.style.outlineColor = "red";

object.style.outlineColor = "red";

Ví dụ

.ferrari { outline-color: red; }

hỗ trợ trình duyệt

Tôi có thể sử dụng phác thảo không? . com

Sự miêu tả

Thuộc tính màu viền đặt màu cho đường viền xung quanh một phần tử

Những giá trị khả thi

• màu - Bất kỳ giá trị màu hợp lệ nào

• đảo ngược - Đường viền thực hiện đảo ngược màu của khu vực nơi nó được vẽ

Áp dụng đối với

Tất cả các phần tử HTML

Cú pháp DOM

object.style.outlineColor = "red";

Ví dụ

Đây là ví dụ -

   
   
   
   
      

         This text is having thin solid red  outline.
      
      

      
      

         This text is having thick dashed green outline.
      
      

      
      

         This text is having 5x dotted blue outline.
      
   
   
 

Điều này sẽ tạo ra kết quả sau -

Hướng dẫn CSS này giải thích cách sử dụng thuộc tính CSS có tên là outline-color với cú pháp và ví dụ

Sự miêu tả

Thuộc tính màu viền của CSS xác định màu viền của phần tử, là một đường được vẽ bên ngoài cạnh viền của phần tử

cú pháp

Cú pháp của thuộc tính CSS outline-color là

outline-color: value;

Tham số hoặc Đối số

Màu nền trước của nội dung văn bản của phần tử. Nó có thể là một trong những điều sau đây

ValueDescription#RRGGBBB Biểu thị thập lục phân của màu đường viền
div { màu đường viền. #FF0000; . rgb(255,0,0); . đỏ, xanh dương, đen, trắng)
div { outline-color: rgb(255,0,0); }nameName of the outline-color (ie: red, blue, black, white)
div { outline-color. màu đỏ; . đảo ngược; . thừa kế;
div { outline-color: invert; }inheritElement will inherit the outline-color from its parent element
div { outline-color: inherit; }

Ghi chú

• Giá trị trong thuộc tính màu viền CSS có thể được biểu thị dưới dạng giá trị thập lục phân, giá trị rgb hoặc dưới dạng màu được đặt tên
• Giá trị màu đường viền có thể được biểu thị bằng các giá trị thập lục phân, chẳng hạn như #FFFFFF, #000000 và #FF0000
• Giá trị màu viền có thể được biểu thị bằng cách sử dụng rgb chẳng hạn như rgb(255,255,255), rgb(0,0,0) và rgb(255,0,0)
• Giá trị màu viền có thể được biểu thị bằng các màu được đặt tên như trắng, đen và đỏ
• Xem thêm các thuộc tính kiểu viền, chiều rộng viền và viền
• Cần chuyển đổi giá trị màu của bạn sang một đại diện khác?

tính tương thích của trình duyệt web

Thuộc tính CSS outline-color có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Firefox (Tắc kè)
• Internet Explorer (IE)
• Ô-pê-ra
• Safari (WebKit)

Ví dụ

Chúng ta sẽ thảo luận về thuộc tính outline-color bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS

Sử dụng hệ thập lục phân

Hãy xem ví dụ về màu đường viền CSS nơi chúng tôi đã cung cấp giá trị thập lục phân cho màu đường viền

p { outline-color: #000000; outline-style: solid; }

In this CSS outline-color example, we have provided a hexadecimal value of #000000 which would display a black outline around the text within the

tag.

Sử dụng RGB

Chúng tôi cũng có thể cung cấp giá trị màu phác thảo bằng cách sử dụng rgb

p { outline-color: rgb(0,0,0); outline-style: solid; }

In this CSS outline-color example, rgb(0,0,0) would also display a black outline around for the

tag.

Sử dụng tên màu

Hãy xem ví dụ về màu đường viền CSS nơi chúng tôi đã cung cấp giá trị dưới dạng màu được đặt tên

p { outline-color: black; outline-style: solid; }

In this CSS outline-color example, we have provided the name "black" which would also create a black outline around the

tag.

Tên màu

Dưới đây là danh sách các tên màu để lựa chọn

Màu Namehex ValueWatchaliceBlue#F0F8FF Antiquewhite#Faebd7 Aqua#00ffff Aquamarine#7FFFD4 Azure#F0FFFF BEIGE#F5F5DC

Color NameHex ValueSwatchlightpink#FFB6C1 lightsalmon#FFA07A lightseagreen#20B2AA lightskyblue#87CEFA lightslategray#778899 lightslategrey#778899 lightsteelblue#B0C4DE lightyellow#FFFFE0 lime#00FF00 limegreen#32CD32 linen#FAF0E6 magenta#FF00FF maroon#800000 mediumaquamarine#66CDAA mediumblue#0000CD mediumorchid#BA55D3

Sự khác biệt giữa đường viền và đường viền là gì?

Đảo ngược màu phác thảo là gì?

Đường viền CSS có tồn tại không?

Phác thảo trong HTML là gì?