Phác thảo CSS

Thuộc tính tốc ký CSS phác thảo cho phép vẽ một đường bao quanh phần tử, bên ngoài đường viền. Nó được sử dụng để thiết lập tất cả các thuộc tính của phác thảo trong một khai báo duy nhất. Các thuộc tính phác thảo CSS có thể được phân loại thành 4 loại, cụ thể là Kiểu phác thảo, Màu sắc đường viền, Chiều rộng đường viền & Độ lệch đường viền. Chúng tôi sẽ thảo luận tuần tự tất cả các loại thuộc tính phác thảo thông qua các ví dụ

Của cải. Có rất nhiều thuộc tính xuất hiện trong bộ sưu tập phác thảo CSS, tất cả chúng đều được mô tả rõ ràng với ví dụ

kiểu phác thảo. Nó được sử dụng để thiết lập sự xuất hiện của đường viền của một phần tử tức là. , nó cho chúng ta biết phong cách hoặc loại phác thảo. Không thể truy cập bất kỳ thuộc tính phác thảo nào khác mà không đặt kiểu phác thảo. Nếu không có thì kiểu mặc định sẽ được đặt thành không

cú pháp

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Thí dụ. Ví dụ này minh họa thuộc tính Outline trong đó phần bù được xác định bằng một giá trị cụ thể

Đườ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

Các thuộc tính phác thảo CSS vẽ một đường viền xung quanh một phần tử không ảnh hưởng đến bố cục, làm cho nó trở nên lý tưởng để làm nổi bật. Điều này bao gồm cách viết tắt của outline, cũng như outline-width, outline-style, outline-color và outline-offset

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

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

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

Tôi có thể phác thảo văn bản trong CSS không?

Tại sao CSS phác thảo không hoạt động?