Chủ Nhật, 29 tháng 12, 2013
CSS3 Borders
CSS3 Borders
Với CSS3, bạn có thể tạo ra biên giới làm tròn, thêm vào bóng tối để hộp, và sử dụng một hình ảnh như một biên giới - mà không sử dụng một chương trình thiết kế, như Photoshop.
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính biên giới như sau:
- biên giới-bán kính
- box-shadow
- cửa hình ảnh
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| biên giới-bán kính | |||||
| box-shadow | |||||
| cửa hình ảnh | |||||
Internet Explorer 9 + hỗ trợ biên giới-bán kính và hộp bóng.
Firefox, Chrome, và Safari hỗ trợ tất cả các thuộc tính biên giới mới.
Lưu ý: Safari 5, và các phiên bản cũ hơn, đòi hỏi phải có tiền tố-webkit-cho cửa hình ảnh.
Opera hỗ trợ biên giới-bán kính và ô-bóng tối, nhưng đòi hỏi phải có tiền tố-o-cho cửa hình ảnh.
CSS3 Rounded Corners
Thêm góc tròn trong CSS2 là khó khăn. Chúng tôi đã phải sử dụng hình ảnh khác nhau cho mỗi góc.
Trong CSS3, tạo ra các góc tròn là dễ dàng.
Trong CSS3, tài sản biên giới-bán kính được sử dụng để tạo ra các góc tròn:
Hộp này đã làm tròn góc!
Ví dụ
Thêm góc được làm tròn đến một yếu tố div:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Thử nó cho mình »
CSS3 Box bóng
Trong CSS3, tài sản hộp bóng được sử dụng để thêm vào bóng tối để hộp:
Ví dụ
Thêm một hộp bóng tối để một phần tử div:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Thử nó cho mình »
CSS3 biên giới ảnh
Với CSS3 sở hữu cửa hình ảnh mà bạn có thể sử dụng một hình ảnh để tạo ra một biên giới:
Tài sản cửa hình ảnh cho phép bạn chỉ định một hình ảnh như một biên giới!
Hình ảnh ban đầu được sử dụng để tạo ra biên giới trên:
Ví dụ
Sử dụng một hình ảnh để tạo ra một biên giới xung quanh một phần tử div:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>
<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<br>
<div id="stretch">Here, the image is stretched to fill the area.</div>
<p>Here is the image used:</p>
<img src="border.png">
</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