Lập trình web

"Ảo thuật" với border-corner-shape Featured

Chia sẻ nhanh

Tôi tin chắc rằng, với tất cả anh em trong giới thiết kế và lập trình website đều đã biết việc bo tròn góc của một class bất kì bằng border-radius trong css. Nhưng không phải tất cả trong số đó đều biết tới một thuộc tính ảo diệu là border-corner-shape. Với thuộc tính này, ngoài bo tròn góc các bạn có thể tạo góc vát, góc tù, góc vuông với class bất kì. Chúng ta cùng nghiên cứu tính hữu ích của nó.

Thuộc tính của border-corner-shape bao gồm.

Tên:     border-corner-shape
Giá trị:     curve | bevel | scoop | notch
Giá trị mặc định:     curve
Đối tượng áp dụng:    Tất cả các yếu tố, ngoại trừ TABLE có thuộc tính  ‘border-collapse’ là ‘collapse’
Tính kế thừa:     no
Phần trăm:     N/A
Phương thức tính:     theo quy định

Sau đây, tôi sẽ giới thiệu về các giá trị của chúng một cách trực quan hơn.

Curve (bo tròn góc)

border-corner-shape: curve;
border-radius: 10% / 30px;
width: 400px;
height: 300px;


bevel (bo vát góc)

border-corner-shape as bevel

border-corner-shape: bevel;
border-radius: 10% / 30px;
width: 400px;
height: 300px;

scoop (bo tròn bên trong)

border-corner-shape as scoop

border-corner-shape: scoop;
border-radius: 10% / 30px;
width: 400px;
height: 300px;


notch (bo vuông góc bên trong)

border-corner-shape as notch

border-corner-shape: notch;
border-radius: 10% / 30px;
width: 400px;
height: 300px;


Để cho các bạn hiểu rõ thêm, các bạn có thể click vào link demo sau đây: border-corner-shape

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?