Tạo bo góc không dùng ảnh

Bạn hãy truy cập vào website http://www.curvycorners.net/ và dowload thư viên về (Free). Bạn cũng có thể xem demo theo link http://www.curvycorners.net/demos/

Cách sử dụng mình thấy là khá đơn giản nhất trong các thư viện tạo góc bo tròn, sau khi include script này: Thì mình chẳng còn đụng gì tới javascript để khởi tạo, hay thiết lập cái gì cả, plugin này sẽ tự động tìm trong CSS các box nào bạn quy định bo tròn góc.
vd thẻ div có “div.test {-webkit-border-radius: 4px; -moz-border-radius: 4px;}”, đối với các trình duyệt mới và không phải IE6,7..thì nó sẽ tự động bo tròn mà không cần sử dụng script này, còn đối với các trình duyệt không hỗ trợ bo tròn, thì script này sẽ bo tròn giúp bạn. Hoàn toàn tự động.
Ví dụ khi mình tạo bo góc với code như sau:

<head>
<title>hmweb.com.vn</title>
<script type=”text/JavaScript” src=”curvycorners.src.js”></script>
<style type=”text/css”>
.myBox {
width: 260px;
height: 100px;
padding: 10px;
text-align: left;
background-color: #fff;
border: 3px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
html,body{
height: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
background-color:#666666;
}
</style>
</head>
<body>
<div class=”myBox”>
https://tieuyeuit.wordpress.com -tuyệt quá
</div>
</body>
</html>

Advertisements

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

Trả lờ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 Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: