Thuộc tính của box trong css3: tài liệu học css
| Thuộc tính | giá trị | ví dụ | Mô tả |
|---|---|---|---|
| box-align | start | box-align: start; | Thành phần sẽ nằm về phía trên cùng của thành phần bao ngoài. |
| end | box-align: end; | Thành phần sẽ nằm về phía dưới cùng của thành phần bao ngoài. | |
| center | box-align: center; | Thành phần sẽ nằm giữa thành phần bao ngoài (theo chiều thẳng đứng). | |
| baseline | box-align: baseline; | Thành phần sẽ nằm theo đường cơ bản (baseline), giá trị được áp dụng đối với các box theo chiều ngang (box-orient: horizontal). | |
| stretch | box-align: stretch; | Thành phần sẽ được nới rộng để phù hợp với thành phần bao ngoài. | |
| box-direction | normal | box-direction: normal; | Hiển thị thành phần từ trên xuống dưới hay từ trái sang phải, đây là dạng mặc định. |
| reverse | box-direction: reverse; | Hiển thị thành phần từ dưới lên trên hay từ phải sang trái. | |
| inherit | box-direction: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-flex | Số nguyên | box-flet: 2; | Ưu tiên linh hoạt theo các thành phần khác. |
| inherit | box-flet: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-ordinal-group | Số nguyên | box-ordinal-group: 1; | Cho biết thứ tự ưu tiên của các thành phần. |
| inherit | box-ordinal-group: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-orient | block-axis | box-orient: block-axis; | Định dạng thành phần dọc theo khối trục. |
| horizontal | box-orient: horizontal; | Định dạng thành phần từ trái sang phải theo chiều ngang. | |
| inline-axis | box-orient: inline-axis; | Định dạng thành phần theo trục nội tuyến. | |
| vertical | box-orient: vertical; | Định dạng thành phần từ trên xuống dưới theo chiều dọc. | |
| inherit | box-orient: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-pack | center | box-pack: center; | Đối với box hướng bình thường cạnh trái của thành phần được được chia đều cho cả hai phía. |
| end | box-pack: end; | Đối với box hướng bình thường cạnh phải của thành phần được đặc mép bên phải, ngược lại cạnh trái của thành phần sẽ được đặt mép bên trái. | |
| justify | box-pack: justify; | Không gian mở rộng sẽ được chia đều giữa các thành phần. | |
| start | box-pack: start; | Đối với box hướng bình thường cạnh trái của thành phần được đặc mép bên trái, ngược lại cạnh phải của thành phần sẽ được đặt mép bên phải. | |
| box-sizing | content-box | box-sizing: content-box; | Thuộc tính height và width chỉ có nội dung, không bao gồm padding, border và margin. |
| border-box | box-sizing: border-box; | Thuộc tính height và width sẽ bao gồm padding và border, nhưng không gồm margin. | |
| inherit | box-sizing: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-shadow | đơn vị (ngang) | box-shadow: 10px 10px; | Đây là thuộc tính bắt buộc, định vị trí bóng nằm ngang cho thành phần, có thể dùng số âm. |
| đơn vị (dọc) | box-shadow: 10px 10px; | Đây là thuộc tính bắt buộc, định vị trí bóng nằm dọc cho thành phần, có thể dùng số âm. | |
| đơn vị (độ mờ) | box-shadow: 10px 10px 10px; | Định khoảng cách mờ cho bóng. | |
| đơn vị (độ lan rộng) | box-shadow: 10px 10px 10px10px; | Tăng hoặc giảm độ lan rộng cho bóng. | |
| mã màu | box-shadow: 10px 10px#cc0000; | Màu sắc cho bóng. | |
| inset | box-shadow: 10px 10px #cc0000 inset; | Thay đổi bóng từ ngoài tối vào trong sáng. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>box shadow</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
box shadow
CSS viết:
p {
background: #cc0000;
height: 50px;
-moz-box-shadow: 5px 10px 5px #000;
-webkit-box-shadow: 5px 10px 5px #000;
box-shadow: 5px 10px 5px #000;
}
0 nhận xét:
Đăng nhận xét