Embedded Files
Thủ Thuật Bo Góc Tròn Bằng CSS3
Thủ Thuật Bo Góc Tròn Bằng CSS3
Làm sao để có thể bo góc hình chữ nhật trong trang Web? Trước kia, có rất nhiều cách để giải quyết vấn đề này, thí dụ như: dùng 1 đoạn javascript, dùng các hình bo góc làm sẵn để nạp lên trong các table các div lồng nhau. Tuy nhiên, có 1 cách giải quyết đơn giản hơn nhiều, nhờ sự phát triển về công nghệ của CSS3.
Chỉ cần 1 đoạn code CSS sau đây:
1
2
3
4
5
6
/* Dùng cho các các trình duyệt kiểu Safari */
-webkit-border-radius: 10px;
/* Dùng cho các trình duyệt xài cơ chế Gecko như Firefox */
-moz-border-radius: 10px;
/* Dùng cho các trình duyệt khác */
border-radius: 10px;
Thủ thuật này thể hiện tốt trên các trình duyệt Mozila/Firefox, Safari 3, Opera. Đồi với những phiên bản cũ hơn thì ta cần sử dụng kỹ thuật cũ hơn để làm.
Để làm được sau bạn cần sử dụng đoạn code trên vào trang web của mình:
Bạn đã thấy được bo góc tròn cả 4 góc chưa nhỉ?
Có thể làm như sau:
1
<div style="border: 1px solid rgb(204, 204, 204); -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; background-color: #c3d0d4; padding: 10px;">Bạn đã thấy được bo góc tròn cả 4 góc chưa nhỉ?</div>
Hoặc như sau:
Trong XHTML:
1
<div class="botron-css3">Bạn đã thấy được bo góc tròn cả 4 góc chưa nhỉ?</div>
Trong CSS:
2
3
4
5
6
7
8
9
{
border: 1px solid rgb(204, 204, 204);
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background-color: #c3d0d4;
padding: 10px;
}
Chúc thành công!
Bài viết nguồn : http://fisama.wordpress.com/2010/04/16/thu-thuat-bo-goc-tron-bang-css3/
ví dụ : Bo tròn góc
<!DOCTYPE html>
<html>
<head>
<style>
div.button {
margin: 30px;
border: 1px solid #000;
display: inline-block;
padding: 6px;
}
#mac {
border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
height: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6),
to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);
}
#gmail {
border-radius: 3px;
-moz-border-radius: 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#ddd));
background: -moz-linear-gradient(top, #fff, #ddd);
border: 1px solid #bbb;
}
#circle {
border-radius: 36px; /* half of button size + padding */
-moz-border-radius: 36px;
height: 60px;
width: 60px;
border: 2px solid #ccc;
left: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#f53e0c),
to(#ffbaa8));
background: -moz-linear-gradient(top, #f53e0c, #ffbaa8);
}
#circle span {
position: relative;
top: 10px;
left: 10px;
}
</style>
</head>
<body style="font: 75% Lucida Grande, Trebuchet MS">
<div class="button" id="mac">50% round button style</div>
<div class="button" id="gmail">Gmail button style</div>
<div class="button" id="circle"><span>Circle button style</span></div>
<p id="log" style="color: gray"></p>
</body>
</html>
Page updated
Google Sites
Report abuse