Trang chủ > Thủ thuật blog > Tạo hiệu ứng bo tròn góc bằng CSS

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

Đây là cách mà bạn có thể bo tròn góc bài mình để trông đẹp hơn.Bạn cũng có nhiều cách để trang trí,bo tròn góc bài viết của mình.Hôm nay mình xin giới thiệu bạn cách thực hiện 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ẻ ]]> 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 :

Nội dung

Mặc định nó sẽ bo tròn 4 góc.Tuy nhiên bạn có thể bo tròn các góc mà bạn muốn bằng cách sau.Thay đoạn code màu trên thành các code theo ý bạn bên dưới:
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;

Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: