//
you're reading...
Design, Webs

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:

/* 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:

<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:

<div class="botron-css3">Bạn đã thấy được bo góc tròn cả 4 góc chưa nhỉ?</div>

Trong CSS:

.botron-css3
{
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!

~Fri3ng3R~

Advertisements

Discussion

2 thoughts on “Thủ Thuật Bo Góc Tròn Bằng CSS3

  1. Đúng cái tớ đang phân vân. Cảm ơn bạn rất nhiều!

    Posted by only you | 25.08.2011, 07:41
  2. Ko dùng đc cho IE đâu bạn.

    Posted by thanhdao | 06.09.2011, 10:14

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: