เมื่อก่อนเวลาจะทำให้ Div เป็นขอบโค้งมน ก็จะต้องตัดรูป ด้านมุมต่างๆ ให้โค้งเว้าสวยงาม แต่ตอนนี้ เรามาใช้ Javascript ช่วยให้ง่ายขึ้น อันนี้เลย jQuery Corner เป็น plugin ของ jQuery ใช้งานง่าย สามารถปรับแต่งได้ว่า จะเอา โค้งมาก โค้งน้อย มุมไหนโค้ง มุมไหนไม่โค้ง อะไรจะปานนั้น
ตัวอย่าง
ไฟล์ที่ต้องการ
วิธีใช้
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>GooCode.NeT Demo jQuery Corner</title><!– เรียกใช้งาน jquery –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script><!– เรียกใช้งาน plugin –>
<script type=”text/javascript” src=”http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09″></script><!– สั่งให้ Div ขอบโค้งมนนะบัดนาว –>
<script>
$(‘#div-1′).corner();
$(‘#div-2′).corner(“30px”);
$(‘#div-3′).corner(“tl br 40px”);
</script><style>
div{
margin:20px;
width:300px;
height:100px;
display:inline-block;
background:#0080ff;
color:#fff;
text-align:center;
padding-top:50px;
}
</style></head>
<body><div id=”div-1″>div-1<br />$(this).corner();</div>
<div id=”div-2″>div-2<br />$(this).corner(“30px”);</div>
<div id=”div-3″>div-3<br />$(this).corner(“tl br 40px”);</div>
</body>
</html>
Popularity: 5% [?]
Related Posts:
