CSS phác thảo là gì?

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 đó

1. 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ể
2. 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

CSS phác thảo là gì?

Đường viền so với CSS đường viền là gì?

Khi nào nên sử dụng CSS phác thảo?

Nội tuyến và phác thảo trong CSS là gì?