【JQuery】Curvycorners–區塊呈現圓角效果
使用JQuery前，需要引用Jquery元件及Curvycorners元件。
網頁中的區塊呈現圓角效果，做法有很多種，在工作上遇到大部分的人是用切圖方式加上搭配CSS相關設定。無意間在網路上發現Jquery好用簡單元件，就算網頁程式設計師不懂切圖做圖，也可以輕鬆達到區塊呈現圓角效果。
HTML 頁面（參考）︰
<div class="myBox" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 省略之...
</div>
Javascript︰
$(function(){
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
$('.myBox').corner(settings);
});;
CSS（參考）︰
<style type="text/css">
.myBox
{
margin: 10px 0 0 0px;
border: 0px solid #ffffff;
Color:#000000;
width: 90%;
height: 100px;
padding: 20px;
text-align: left;
background-color:#f1e767;;
border: 3px solid #ffffff;
}
</style>
執行畫面︰
留言
張貼留言