網頁

不用圖片就能輕鬆產生圓角的效果 (使用 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. 歡迎您提供寶貴的意見。