Mục đích của sách hướng dẫn này là giải thích cách tạo đường viền góc tròn. Đối với điều này, trước tiên, chúng ta phải biết về “ biên giới ' tài sản. Vì vậy, hãy bắt đầu!
Thuộc tính 'border' trong CSS là gì?
Để tạo đường viền xung quanh một phần tử, bạn cần sử dụng “ biên giới ' tài sản. Bằng cách sử dụng thuộc tính này, bạn có thể đặt “ Phong cách ',' màu sắc ', và ' bề rộng ”Của biên giới.
Cú pháp
Cú pháp của thuộc tính border được cung cấp như sau:
biên giới : chiều rộng phong cách màu
Đây là mô tả của các giá trị đã cho ở trên:
- bề rộng: Nó được sử dụng để thiết lập chiều rộng của đường viền.
- Phong cách: Nó được sử dụng để thiết lập kiểu đường viền, chẳng hạn như chấm, đứt, liền mạch hoặc kép.
- màu sắc: Nó xác định màu của đường viền.
Đây là một ví dụ mà chúng tôi triển khai “ biên giới ' tài sản.
Làm thế nào để tạo đường viền bằng CSS?
Để tạo đường viền, trước tiên, hãy thêm một phần tử vào tệp HTML. Để làm như vậy, chúng tôi sẽ tạo một
và
:
< thân hình >
< div lớp = 'góc' >
< h1 > Gợi ý về Linux < / h1 >
< P > Các góc tròn trong CSS < / P >
< / div >
< / thân hình >
Tiếp theo, chúng ta sẽ chuyển sang phần CSS.
Đây, “ .góc ”Được sử dụng để truy cập lớp được gán cho
.góc {
biên giới : 4px chất rắn rgb ( 248 , 6 , 107 ) ;
bề rộng : 250px ;
Chiều cao : 150px ;
màu nền : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Khi bạn đã triển khai mã được đề cập ở trên, hãy chuyển đến tệp HTML và thực thi nó. Bạn sẽ thấy kết quả sau:
Bây giờ, chúng ta sẽ chuyển sang phần tiếp theo, nơi chúng ta sẽ tạo đường viền vuông thành đường viền góc tròn.
Làm thế nào để làm tròn góc bằng cách sử dụng CSS?
Để tạo đường viền góc tròn, dấu “ bán kính biên giới ”Đang được sử dụng, trong đó bạn có thể đặt bán kính của góc theo sở thích của mình.
Cú pháp
Cú pháp của thuộc tính border-radius được cung cấp bên dưới:
bán kính biên giới : giá trịHãy tiếp tục ví dụ trước và đặt bán kính đường viền để đạt được các góc tròn.
Thí dụ
Trong ' .góc ”Của tệp CSS, đặt giá trị của“ bán kính biên giới 'Thuộc tính' 30px ”:
bán kính biên giới : 30px ;Với dòng trên được thêm vào, bạn sẽ nhận được kết quả sau:
Đầu ra được cung cấp ở trên biểu thị rằng các đường viền được thay đổi thành công thành các góc tròn do thuộc tính bán kính đường viền.
Sự kết luận
Trong CSS “ bán kính biên giới ”Tài sản được sử dụng để thay đổi góc của biên giới. Hình dạng của đường cong thay đổi theo giá trị bán kính đã cho. Sử dụng thuộc tính đã đề cập, bạn có thể đặt bán kính của góc theo sự lựa chọn của bạn. Trong bài viết này, chúng tôi đã giải thích cách làm tròn đường viền góc bằng cách sử dụng thuộc tính border-radius với sự trợ giúp của một ví dụ.