不用圖片就能輕鬆產生圓角的效果 (使用 jQuery )
[ 前言 ]
在 Web 2.0 的時代裡，圓角是一個不可或缺的裝飾，甚至可說是 Web 2.0 的指標了，以往圓角都是以圖片的方式來達成，但是時代不同了，網路上有不少好心人士分享不需圖片也可以實現圓角效果的 jQuery Plugin，是不是很神奇呢? 馬上就來看看效果如何。[ 圓角範例 ]
圓角效果 1
圓角效果 2
圓角效果 3
[ 圓角 jQuery Plugin 下載 ]
[ 產生圓角使用方法 ]
步驟 1.在解壓縮出來的資料夾裡找到 jquery.corner.js 這個檔案，並且把它上傳到你的網路空間。
步驟 2.
搜尋</head>，並在</head>上面插入下列程式碼。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='你的網路空間地址/jquery.corner.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$("#example-corner1").corner();
$("#example-corner2").corner("tl bl 20px").corner("tr 40px");
$("#example-corner3").corner("tl bevel 25px").corner("br notch 25px");
});
</script>
<style type="text/css">
.example-corner{
float:left;
margin:0px 26px;
border:2px solid #000000;
width:100px;
height:100px;
text-align:center;
line-height:100px;
}
</style>
步驟 3.在<body>和</body>之間插入下列程式碼。
<div id="example-corner1" class="example-corner"> 神奇的圓角效果 </div> <div id="example-corner2" class="example-corner"> 神奇的圓角效果 </div> <div id="example-corner3" class="example-corner"> 神奇的圓角效果 </div>如此一來就可以實現不用圖片也能有圓角效果囉，如需要更詳細的使用方法，請到 JRC Blog 官網查詢。
留言
張貼留言
1. 文章如有錯誤，歡迎指正。
2. 請勿打廣告，違者一律刪。
3. 歡迎您提供寶貴的意見。