CSS3 02 – Rounded Corners

0
7

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”BddZvE” default_tab=”css,result” user=”xeko995″]See the Pen <a href=’https://codepen.io/xeko995/pen/BddZvE/’>BddZvE</a> by Cao Anh Nhất (<a href=’https://codepen.io/xeko995′>@xeko995</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XaagwM” default_tab=”html,result” user=”xeko995″]See the Pen <a href=’https://codepen.io/xeko995/pen/XaagwM/’>XaagwM</a> by Cao Anh Nhất (<a href=’https://codepen.io/xeko995′>@xeko995</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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;

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RZZgzq” default_tab=”html,result” user=”xeko995″]See the Pen <a href=’https://codepen.io/xeko995/pen/RZZgzq/’>RZZgzq</a> by Cao Anh Nhất (<a href=’https://codepen.io/xeko995′>@xeko995</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rzzwXy” default_tab=”html,result” user=”xeko995″]See the Pen <a href=’https://codepen.io/xeko995/pen/rzzwXy/’>rzzwXy</a> by Cao Anh Nhất (<a href=’https://codepen.io/xeko995′>@xeko995</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LjjjPd” default_tab=”html,result” user=”xeko995″]See the Pen <a href=’https://codepen.io/xeko995/pen/LjjjPd/’>LjjjPd</a> by Cao Anh Nhất (<a href=’https://codepen.io/xeko995′>@xeko995</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

Tác giả: Cao Anh Nhất

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây