Thứ Hai, 30 tháng 12, 2013
CSS3 User Interface
Giao diện CSS3 tài
Trong CSS3, một số tính năng giao diện người dùng mới được thay đổi kích thước các yếu tố, kích thước hộp, và phác thảo.
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính giao diện người dùng sau đây:
- thay đổi kích thước
- hộp kích thước
- phác thảo bù đắp
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| thay đổi kích thước | |||||
| hộp kích thước | |||||
| phác thảo bù đắp | |||||
Tài sản thay đổi kích thước được hỗ trợ trong trình duyệt Firefox, Chrome, và Safari.
Hộp-kích thước được hỗ trợ trong Internet Explorer, Chrome, Safari, và Opera. Firefox đòi hỏi các tiền tố-moz-.
Tài sản phác thảo bù đắp được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ Internet Explorer.
Thay đổi kích thước CSS3
Trong CSS3, tài sản thay đổi kích cỡ xác định có hay không một yếu tố cần được thay đổi kích thước của người dùng.
Phần tử div này là thay đổi kích thước của người sử dụng (trong Firefox, Chrome, và Safari).
Các mã CSS như sau:
Ví dụ
Xác định rằng một phần tử div nên được thay đổi kích thước của người sử dụng:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer and Opera do not support the resize property.</p>
<div>The resize property specifies whether or not an element is resizable by the user.</div>
</body>
</html>
Thử nó cho mình »
CSS3 Box Cắt tinh
Tài sản hộp kích thước cho phép bạn xác định một số yếu tố để phù hợp với một khu vực trong một cách nào đó:
Ví dụ
Chỉ định hai hộp giáp cạnh nhau:
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>
</body>
</html>
Thử nó cho mình »
CSS3 Outline offset
Tài sản phác thảo bù đắp bù đắp một phác thảo, và rút ra nó vượt ra ngoài biên giới cạnh.
Phác thảo khác nhau từ biên giới theo hai cách:
- Phác thảo không mất không gian
- Đề cương có thể là không phải hình chữ nhật
Div này có 15px phác thảo bên ngoài rìa biên giới.
Các mã CSS như sau:
Ví dụ
Chỉ định một 15px phác thảo bên ngoài rìa biên giới:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This div has an outline border 15px outside the border edge.</div>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét