CSS3 02 – Rounded Corners

0
89

CSS3 Rounded Corners giúp chúng ta bo tròn một khối trong HTML

1. Cú pháp Rounded Corners

Để sử dụng Rounded Corners ta khai báo với cú pháp

Trong đó giá trị của thuộc tính là bán kính của góc mà ta muốn bo tròn

2. Các giá trị truyền vào thuộc tính

2.1. Truyền vào 1 giá trị

Khi truyền vào một giá trị thì CSS3 sẽ tự động bo tròn 4 góc của một khối

Ví dụ để bo tròn 1 khối rộng 200px cao 200px với bán kính là 20px cho mỗi góc

See the Pen BddZvE by Cao Anh Nhất (@xeko995) on CodePen.dark

2.2. Truyền vào 2 giá trị

Khi truyền vào 2 giá trị thì CSS3 sẽ tự động bo tròn với giá trị đầu tiền ở vị trí trên bên trái và dưới bên phái, giá trị thứ 2 sẽ là trên bên phải dưới bên trái

Ví dụ để bo tròn một khối với góc trên trái dưới phải là 30px và trên phải dưới trái 50px

See the Pen XaagwM by Cao Anh Nhất (@xeko995) on CodePen.dark

2.3. Truyền vào 3 giá trị

Khi truyền vào 3 giá trị CSS3 sẽ tự động áp dụng giá trị đầu tiên vào vị trí trên bên trái, giá trị thứ 2 vào vị trí trên trái và dưới phải , giá trị thứ 3 áp dụng vào vị trí dưới trái

Ví dụ để bo tròn một khối với giá trị : 30px 50px 15px;

See the Pen RZZgzq by Cao Anh Nhất (@xeko995) on CodePen.dark

2.4. Truyền vào 4 giá trị

Khi truyền vào 4 giá trị CSS3 sẽ tự động áp dụng giá trị thuộc tính theo chiều kim đồng hồ bắt đầu từ vị trí trên bên trái.

Ví dụ để bo tròn một khối có các giá trị: 20px 30px 40px 50px

See the Pen rzzwXy by Cao Anh Nhất (@xeko995) on CodePen.dark

2.5. Tạo hình tròn bằng thuộc tính border-radius

Để tạo hình tròn cho một khối chúng ta truyền vào giá trị là 50%

*Lưu ý: Khôi được tạo phải là một hình vuông, nếu là hình chữ nhật hoặc hình khác thì kết quả sẽ là một hình khác

Ví dụ để tạo một hình tròn trong một khối rộng 200px cao 200px

See the Pen LjjjPd by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here