CurvyConrners là 1 đoạn mã viết bằng javascript. Nó có tác dụng tạo góc bo cho thẻ div của bạn. Bạn có thể tùy biếtn độ bo của từng góc một. CurvyConrners chạy tốt trên các trình duyệt phổ biến như IE, Firefox, Safari , Chrome và Opera.
So với cách truyền thống sử dụng đối tượng hình ảnh với các góc bo được vẽ sẵn, phương pháp sử dụng CurvyConrners sẽ ít tốt băng thông cho máy chủ hơn và có thể tùy chỉnh độ bo các góc 1 cách linh hoạt. Ngoài ra bạn cũng có thể tùy biến hình nền và border của thẻ div sử dụng CurvyConrners.
Cách sử dụng:
1. Đầu tiên bạn download đoạn mã tại đây
2. Gọi đoạn mã bằng cách đặt lệnh:
<script type="text/JavaScript" src="curvycorners.src.js"></script>
vào giữa cặp thẻ <head></head> của trang html đang viết. Lưu ý là file curvycorners.src.js phải đặt chung với thư mục lưu file html của bạn.
3. Tiếp theo đặt đoạn mã:
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
/*
Usage:
curvyCorners(settingsObj, selectorStr);
curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);
selectorStr ::= complexSelector [, complexSelector]...
complexSelector ::= singleSelector[ singleSelector]
singleSelector ::= idType | classType
idType ::= #id
classType ::= [tagName].className
tagName ::= div|p|form|blockquote|frameset // others may work
className : .name
selector examples:
#mydiv p.rounded
#mypara
.rounded
*/
curvyCorners(settings, "#myBox");
}
</script>
vào trước thẻ </head>
Điều chỉ độ bo tại các dòng (tương ứng với góc trên bên trái, trên bên phải, dưới bên trái, dưới bên phải):
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
4. Ấn định thẻ div chịu tác động tại dòng curvyCorners(settings, "#myBox"); với div cần tác động là myBox
5. Cuối cùng, tạo thẻ div với nội dung cần chứa:
<div id="myBox">Nội dung của bạn</div>
Hãy trải nghiệm nhé.
Silut7
No Response to "Tạo bo góc cho 1 div bằng CurvyCorners"
Đăng nhận xét