Thuộc tính border-radius trong CSS - Bo góc cho thành phần

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ởcss2 (Xem thêm về border trong css2).

Cấu trúc

tag {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}
Trong đó:
  • -moz-animation hỗ trợ cho firefox.
  • -webkit-animation hỗ trợ cho Google Chrome và Safari.
  • -ms-animation hỗ trợ cho Internet Explorer.
  • -o-animation hỗ trợ cho Opera.

Thuộc tính của border-radius trong css3:

Thuộc tínhgiá trịVí dụMô tả
border-top-left-radius1 giá trị
[top-left]		border-top-left-radius: 5px;Góc trên - bên trái sẽ được uốn cong.
2 giá trị
[top] [left]		border-top-left-radius: 5px 10px;
border-top-right-radius1 giá trị
[top-right]		border-top-right-radius: 5px;Góc trên - bên phải sẽ được uốn cong.
2 giá trị
[top] [right]		border-top-right-radius: 5px 10px;
border-bottom-left-radius1 giá trị
[bottom-left]		border-bottom-left-radius: 5px;Góc dưới - bên trái sẽ được uốn cong.
2 giá trị
[bottom] [left]		border-bottom-left-radius: 5px 10px;
border-bottom-right-radius1 giá trị
[bottom-right]		border-bottom-right-radius: 5px;Góc dưới - bên phải sẽ được uốn cong.
2 giá trị
[bottom] [right]		border-bottom-right-radius: 5px 10px;
border-radius1 giá trị
[top-left top-right bottom-left bottom-right]		border-radius: 5px;Cả 4 góc đều được uốn cong.
2 giá trị
[top-left bottom-right] [top-right bottom-left]		border-radius: 5px 10px;
3 giá trị
[top-left] 
[top-right bottom-left] 
[bottom-right]		border-radius: 5px 10px 4px;
4 giá trị
[top-left] [top-right] [bottom-left] 
[bottom-right]		border-radius: 5px 10px 4px 8px;

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

border image

CSS viết:

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border image
Đăng lúc Mục: ,

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)