Thuộc tính outline
trong CSS vẽ một đường bao quanh bên ngoài của một phần tử. Nó tương tự như đường viền ngoại trừ điều đó
- Nó luôn bao quanh tất cả các mặt, bạn không thể chỉ định các mặt cụ thể
- Nó không phải là một phần của mô hình hộp, vì vậy nó sẽ không ảnh hưởng đến vị trí của phần tử hoặc các phần tử liền kề [tốt cho việc gỡ lỗi. ]
Các sự kiện nhỏ khác bao gồm việc nó không tôn trọng bán kính đường viền [tôi cho rằng nó không phải là đường viền] và nó không phải lúc nào cũng là hình chữ nhật. Ví dụ, nếu đường viền bao quanh một phần tử nội tuyến với các cỡ chữ khác nhau, Opera sẽ vẽ một hộp so le xung quanh tất cả
Nó thường được sử dụng vì lý do truy cập, để nhấn mạnh một liên kết khi được gắn thẻ mà không ảnh hưởng đến vị trí và theo một cách khác với di chuột
Đường viền luôn giống nhau ở tất cả các mặt;
LƯU Ý - Các thuộc tính phác thảo không được IE 6 hoặc Netscape 7 hỗ trợ
Bạn có thể đặt các thuộc tính phác thảo sau bằng CSS
Thuộc tính chiều rộng phác thảo được sử dụng để đặt chiều rộng của đường viền
Thuộc tính outline-style được sử dụng để thiết lập kiểu đường kẻ cho đường viền
Thuộc tính outline-color được sử dụng để đặt màu cho đường viền
Thuộc tính outline được sử dụng để đặt cả ba thuộc tính trên trong một câu lệnh
Thuộc tính chiều rộng phác thảo
Thuộc tính chiều rộng đường viền chỉ định chiều rộng của đường viền sẽ được thêm vào hộp. Giá trị của nó phải là chiều dài hoặc một trong các giá trị mỏng, trung bình hoặc dày, giống như thuộc tính độ rộng đường viền
Chiều rộng bằng 0 pixel có nghĩa là không có đường viền
Đây là một ví dụ -
This text is having thin outline.
This text is having thick outline.
This text is having 5x outline.
Nó sẽ tạo ra kết quả sau -
Thuộc tính kiểu phác thảo
Thuộc tính kiểu phác thảo chỉ định kiểu cho đường [nét liền, chấm hoặc nét đứt] đi quanh một phần tử. Nó có thể nhận một trong các giá trị sau -
không có - Không có đường viền. [Tương đương với chiều rộng phác thảo. 0;]
solid - Đường viền là một đường liền nét
chấm - Đường viền là một loạt các dấu chấm
gạch ngang - Outline là một loạt các dòng ngắn
double - Đường viền là hai đường liền nét
rãnh - Đường viền trông như được khắc vào trang
sườn núi - Đường viền trông ngược lại với đường rãnh
inset - Outline làm cho hộp trông giống như nó được nhúng trong trang
đầu − Đường viền làm cho hộp trông giống như sắp ra khỏi khung vẽ
ẩn - Giống như không
Đây là một ví dụ -
This text is having thin solid outline.
This text is having thick dashed outline.
This text is having 5x dotted outline.
Nó sẽ tạo ra kết quả sau -
Thuộc tính outline-color
Thuộc tính outline-color cho phép bạn chỉ định màu của đường viền. Giá trị của nó phải là tên màu, màu hex hoặc giá trị RGB, như với các thuộc tính color và border-color
Đây là một 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.
Nó sẽ tạo ra kết quả sau -
tài sản phác thảo
Thuộc tính phác thảo là một thuộc tính tốc ký cho phép bạn chỉ định các giá trị cho bất kỳ thuộc tính nào trong số ba thuộc tính đã thảo luận trước đây theo bất kỳ thứ tự nào ngoại trừ trong một câu lệnh
Thuộc tính phác thảo CSS xác định chiều rộng, kiểu đường kẻ và màu sắc của đường viền của một phần tử. Nó là một thuộc tính tốc ký để thiết lập các thuộc tính CSS độ rộng đường viền, kiểu đường viền và màu đường viền
cú pháp
Cú pháp cho thuộc tính CSS phác thảo là
outline: outline-width outline-style outline-color;
Tham số hoặc Đối số
chiều rộng phác thảo là tùy chọn. Nó là chiều rộng của đường viền của một phần tử và có thể là một trong các phần tử sau
[Nếu không cung cấp chiều rộng đường viền, giá trị mặc định là trung bình]
Giá trịMô tảcố địnhGiá trị cố định được biểu thị bằng px, em,
div { chiều rộng phác thảo. 2px;
div { chiều rộng phác thảo. gầy;
div { chiều rộng phác thảo. trung bình;
div { chiều rộng phác thảo. dày;
kiểu phác thảo là tùy chọn. Đó là kiểu đường của đường viền của một phần tử và có thể là một trong những kiểu sau
ValueDescriptionnoneKhông có đường viền [Đây là mặc định]
div { kiểu phác thảo. phi;
div { kiểu phác thảo. chất rắn;
div { kiểu phác thảo. say mê;
div { kiểu phác thảo. nét đứt;
div { kiểu phác thảo. gấp đôi;
div { kiểu phác thảo. rãnh;
div { kiểu phác thảo. cây rơm;
div { kiểu phác thảo. hình nhỏ;
div { kiểu phác thảo. khởi đầu;
div { kiểu phác thảo. tự động;
div { kiểu phác thảo. thừa kế;
màu phác thảo là tùy chọn. Đó là màu của đường viền của một phần tử và có thể là một trong những màu sau
ValueDescription#RRGGBBBbiểu thị thập lục phân của màu đường viền
div { màu phác thảo. #FF0000;
div { màu phác thảo. rgb[255,0,0]; . đỏ, xanh, đen, trắng]
div { màu phác thảo. màu đỏ;
div { màu phác thảo. đảo ngược;
div { màu phác thảo. thừa kế;
Ghi chú
- Khi sử dụng thuộc tính phác thảo CSS, bạn có thể cung cấp bất kỳ giá trị nào của chiều rộng đường viền, kiểu đường viền và màu đường viền theo bất kỳ thứ tự nào
- 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 phác thảo CSS có hỗ trợ cơ bản với các trình duyệt sau
- Trình duyệt Chrome
- Android
- Firefox [Tắc kè]
- Firefox Di động [Tắc kè]
- Internet Explorer 8+ [IE 8+]
- Điện thoại IE 8+
- Opera 7+
- Opera Mobile 6+
- Safari [WebKit]
- Safari di động 3. 1+
Ví dụ
Chúng tôi sẽ thảo luận về thuộc tính phác thảo 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 với các giá trị chiều rộng phác thảo, kiểu dáng và màu sắc phác thảo