Blog này sẽ thảo luận về:

• Bán kính phác thảo là gì?
• Làm cách nào để áp dụng hiệu ứng bán kính phác thảo trên phần tử HTML?

Bán kính phác thảo là gì?

Các ' đề cương ” thuộc tính được sử dụng để định hình đường viền của phần tử, nhưng nó không thể được triển khai trực tiếp. Do đó, phương pháp thay thế để áp dụng hiệu ứng bán kính trên đường viền là sử dụng “ bán kính đường viền ” Thuộc tính CSS. Nó chỉ định các góc tròn cho đường viền.

Làm cách nào để áp dụng hiệu ứng bán kính phác thảo trên phần tử HTML?

Để sử dụng thuộc tính bán kính phác thảo, hãy thực hiện theo các hướng dẫn đã cho.

Bước 1: Nhúng tiêu đề

Ban đầu, nhúng các tiêu đề bằng cách sử dụng bất kỳ thẻ tiêu đề nào từ “

' đến '

”. Chẳng hạn, chúng tôi đã sử dụng “

' và '

” thẻ để nhúng hai tiêu đề khác nhau trên tài liệu HTML.

Bước 2: Thêm vùng chứa div đầu tiên

Sau đó, thêm vùng chứa bằng cách sử dụng “

' nhãn. Ngoài ra, hãy chèn “ tầng lớp ” thuộc tính và chỉ định tên cho lớp theo sự lựa chọn của bạn.

---

---

Bước 3: Tạo Vùng chứa div thứ hai

Tạo ra một cái khác ' div ” vùng chứa bằng cách làm theo quy trình tương tự:

< h1 Phong cách = 'màu:rgb(48, 10, 218)' > Công ty TNHH Linuxhint Vương quốc Anh < / h1 >

< h2 >

Các ví dụ khác nhau cho bán kính đường viền để tạo các góc của hình tròn phác thảo.

< / h2 >

< div tầng lớp = 'box1-div' >

Linuxhint cung cấp nội dung tốt nhất và độc đáo nhất cho người dùng.

< / div >

< div tầng lớp = 'box2-div' >

Nó hoạt động trên nhiều danh mục.

< / div >

Đầu ra của đoạn mã trên được hiển thị bên dưới:

Bước 4: Đặt phác thảo của vùng chứa đầu tiên

Truy cập vùng chứa đầu tiên bằng cách sử dụng “ .box1-div ” lớp nơi “ . ” là một bộ chọn để truy cập lớp:

.box1-div {

đề cương : chất rắn ;

bề rộng : 300px ;

đệm : 15px ;

lề : 25px ;

}

Sau đó, áp dụng các thuộc tính CSS được liệt kê bên dưới:

• Các ' đề cương ” thuộc tính được sử dụng để thêm đường viền xung quanh phần tử. Chẳng hạn, giá trị của nó được đặt là “ chất rắn ”.
• “ bề rộng ” chỉ định kích thước của phần tử theo chiều ngang.
• “ đệm ” được sử dụng để phân bổ không gian xung quanh nội dung của phần tử.
• “ lề ” chỉ định khoảng trắng ở phía bên ngoài của đường viền phần tử.

Bước 5: Đặt phác thảo của vùng chứa thứ hai

Bây giờ, hãy truy cập phần tử thứ hai với sự trợ giúp của lớp tương ứng “ .box2-div ”:

.box2-div {

đề cương : chất rắn ;

bán kính đường viền : 20px ;

bề rộng : 300px ;

đệm : 15px ;

lề : 25px ;

}

Áp dụng thuộc tính CSS “ bán kính đường viền ” để xác định bán kính của phần tử. Thuộc tính này cho phép bạn thêm các góc bo tròn xung quanh phần tử:

Có thể nhận thấy rằng chúng tôi đã thêm thành công hiệu ứng bán kính phác thảo trên phần tử HTML.

Phần kết luận

Các ' đường viền-bán kính ” không còn nữa. Người dùng có thể áp dụng các thuộc tính bán kính đường viền với sự trợ giúp của các thuộc tính CSS “đường viền” và “bán kính đường viền”. Các ' đề cương ” thêm một đường viền xung quanh phần tử và “ bán kính đường viền ” được sử dụng đặc biệt để tạo kiểu dáng cho đường viền. Bài đăng này đã trình bày các hướng dẫn để thêm hiệu ứng bán kính phác thảo xung quanh phần tử trong HTML.