3.1 Border
Với CSS3 bạn có thể tạo đường biên bao quanh, hiệu ứng bóng đổ, sử dụng hình ảnh làm đường biên mà không cần sử dụng những phần mềm đồ họa khác.
Trình duyệt hỗ trợ
3.1.1 Border-radius
Tạo đường bo tròn góc trong CSS2 cần sự khéo léo, ta phải sử dụng nhiều hình ảnh khác nhau ở mỗi góc
Với CSS3 điều này được thực hiện dễ dàng hơn với border-radius
VD: div {
border:2px solid; border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */ } 3.1.2 Box-shadow Tạo hiệu ứng bóng đổ VD: div { box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ } 3.1.3 Border-image Tạo đường viền với image.
Ảnh sử dụng VD: div { border-width:15px; width:250px; padding:10px 20px; } #round {
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round;
}
#stretch {
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-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>