CSS - Đường viền

Đường viền rất giống với đường viền, nhưng cũng có một số khác biệt lớn -

Một phác thảo không chiếm không gian.
Đường viền không nhất thiết phải là hình chữ nhật.
Phác thảo luôn giống nhau trên tất cả các mặt; bạn không thể chỉ định các giá trị khác nhau cho các mặt khác nhau của một phần tử.

NOTE - Các thuộc tính phác thảo không được hỗ trợ bởi IE 6 hoặc Netscape 7.

Bạn có thể đặt các thuộc tính phác thảo sau bằng cách sử dụng CSS.

Các outline-width thuộc tính được sử dụng để đặt chiều rộng của đường viền.
Các outline-style thuộc tính được sử dụng để đặt kiểu đường cho đường viền.
Các outline-color thuộc tính được sử dụng để thiết lập màu của đường viền.
Các outline thuộc tính được sử dụng để đặt tất cả ba thuộc tính trên trong một câu lệnh duy nhất.

Thuộc tính chiều rộng đường viền

Thuộc tính outline-width 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 border-width.

Chiều rộng không pixel nghĩa là không có đường viền.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính kiểu phác thảo

Các outline-style quy định cụ thể sở hữu phong cách cho dòng (rắn, rải rác, hoặc tiêu tan) mà đi xung quanh một phần tử. Nó có thể nhận một trong các giá trị sau:

none- Không có đường viền. (Tương đương với outline-width: 0;)
solid - Vạch là một nét liền mảnh.
dotted - Dàn ý là một dãy dấu chấm.
dashed - Dàn ý là một loạt các dòng ngắn gọn.
double - Vạch là hai nét liền mảnh.
groove - Đường viền trông như thể nó được khắc vào trang giấy.
ridge - Đường viền trông ngược lại với đường rãnh.
inset - Đường viền làm cho hộp giống như được nhúng vào trang.
outset - Đường viền làm cho hộp giống như nó đang thoát ra khỏi khung vẽ.
hidden - Giống như không có.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính màu viền

Các phác thảo màu sở hữu cho phép bạn xác định màu sắc của đề cương. Giá trị của nó phải là tên màu, màu hex hoặc giá trị RGB, giống như các thuộc tính màu và màu đường viền.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính phác thảo

Các phác thảo bất động sản là một tài sản viết tắt cho phép bạn chỉ định giá trị cho bất kỳ trong ba đặc tính thảo luận trước đây trong bất kỳ thứ tự nhưng trong một tuyên bố duy nhất.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: