Tạo hiệu ứng bo tròn góc bằng CSS


CSS là một trong những ngôn ngữ lập trình rất được ưa chuộng vì sự đơn giản, gọn nhẹ, dễ sử dụng và tương thích với nhiều nền tảng web khác nhau. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo hiệu ứng bo tròn góc với CSS.
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
    #round {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width:250px;
    background:#eeeeee;
    border-color:#DEDEDE;
    }
    .round-content {
    padding: 10px;
    }
  3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
  4. Để sử dụng hiệu ứng bo tròn, bạn dùng cú pháp sau :
    <div id="round" class="round-content">
    Nội dung
    </div>
Mở rộng bước 2
1/ 2 dòng code màu đỏ sẽ thiết lập mặc định bo tròn tất cả 4 góc (Xem ảnh dưới để thấy kết quả)


Nếu bạn chỉ muốn bo tròn từng góc riêng biệt, hãy thay thế nó bằng các cặp code dưới đây :

Bo tròn góc trái bên trên.
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
 Bo tròn góc phải bên trên.
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
 Bo tròn góc trái bên dưới.
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
Bo tròn góc phải bên dưới.
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

2/ Với thông số màu lục, nó sẽ thiết lập chiều rộng của khung được bo tròn. Bạn chỉ việc chỉnh lại sao cho vừa với kích thước của Blog (VD: 100px, 200px ...) hoặc để chế độ tự động canh (width:auto;).

3/ Bạn có thể tạo nhiều lần đoạn mã ở bước 2 (cần đặt thêm số thứ tự round1, round2 ... để không trùng nhau) với nội dung tùy chỉnh nếu muốn. Và khi sử dụng, hãy nhớ đổi tên id trong cú pháp nhé!

Vậy là xong rồi đấy. Hy vọng chút thủ thuật nhỏ này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Thân !

14 Nhận xét on "Tạo hiệu ứng bo tròn góc bằng CSS"

Pika Rock on 2 August 2009 16:58 said...

oh vậy mà cứ tưởng css3.0 mới có border-radius
thực hành thôi ae \:D/

boyproDX on 2 August 2009 17:39 said...

Thì cái này là css3 mà :D (lười ghi thêm :P)
Dạo này kết css, vừa đẹp mà nhẹ :>

Ngankvn ® on 3 August 2009 11:26 said...

CSS3 ???? vậy là ko có tác dụng trên ie6 nhỉ :-?

Bữa định làm cái thủ thuật cấm nguòi dùng IE6 truy cập blog , nhưng nghĩ lại thôi :( , chán

À , BoyPro làm cái bài hướng dẫn tạo cái notifier hiện lên lúc vào blog đi , mình đang cần một cái giống vậy để chèn banner quảng cáo :D , để khách người ta thấy khó chịu thì click tắt đi

boyproDX on 5 August 2009 13:52 said...

@Ngankvn ® : Ừ, IE6 phải chịu thiệt thôi :). Đợi Youtube cấm IE6 rùi ta cấm lun vậy =))
Còn cái notifier thì mình đang tìm cách tích hợp vào Blogger, thấy có nhiều dạng chứa ads đẹp lắm mà ko có hướng dẫn :(

hoaithanh2008 on 1 September 2009 05:56 said...

Hay quá! :D

dfdf said...

chạy tốt trên firefox và chrome. nhưng trên IE 8 trở xuống thì bị lỗi không hiển thị được =.=

hoaihuong_8x on 11 April 2011 09:38 said...

Oạch sao IE9 cũng không có bo góc được nhỉ?

du hoc anh on 24 January 2012 09:24 said...

được hay không còn tùy thuộc vào trình duyệt(Firefox là chuẩn nhất đó)

Minh Tâm on 26 February 2012 18:05 said...

chrome cũng dc zậy

KakA on 14 August 2012 21:06 said...


ông ơi, cho t đặt liên kết lên Blog ông nhé. T add của ông rồi. xem http://khongphaixoan.blogspot.com/p/trao-oi-link.html

Mô tả : Chia sẻ các vấn đề hay trong cuộc sống
Url : http://khongphaixoan.blogspot.com
Tên : Không Phải "Xoắn"
Icon: http://khongphaixoan.blogspot.com/favicon.ico

còn đây là text link của tôi
<img class="favicon" src="http://khongphaixoan.blogspot.com/favicon.ico" /> <a alt="liên kết" href="http://khongphaixoan.blogspot.com" rel="nofollow" target="_blank" title=" Chia sẻ các vấn đề hay của cuộc sống ">BloG Không Phải “Xoắn” </a>

Truyen Bui on 12 January 2013 18:50 said...

Chào bạn, tình cờ mình ghé qua blog của bạn. thật ấn tượng với giao diện và nội dung bài viết. mình thấy blog của bạn có hướng phát triễn tốt nên rất mong được liên kết textlink với bạn. Hy vọng sẻ được hợp tác với bạn.
Textlink dạng : cach vao facebook khong bi chan, huong dan dns cho blogspot moi nhat, tai idm moi nhat, idm full crack, ho tro download idm, thu thuat may tinh chuyen nghiep, theme wp, theme blogger
Đợi hồi âm của bạn : bq.truyen@gmai.com !

Công ty vệ sinh on 11 July 2013 11:35 said...

Tks admin nhe, mình làm được rồi

luan said...

dài wa chỉ nhiu đây là đủ tròn :
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

Mai BG on 11 February 2014 14:57 said...

Ngon, làm phát được lun :))

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3