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
ValueNoteExample[color]_______8invert
Đảo ngược màu của các pixel mà đường viền bao phủ. Không được hỗ trợ rộng rãi. object.style.outlineColor = "red";0
object.style.outlineColor = "red";1
object.style.outlineColor = "red";2
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ố
giá trị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