[英]JQuery Rounded Corners Implementation
我在包裝global-inner div中有一個相當粗略的(main_bg.gif)角的實現。 雖然現在這個功能與內部div代表每個角落,我被告知它不是最好的實現,所以如果有人有一個更清潔的解決方案,那就太好了!
底角圖像使用: margin-top: -8px;
您可以看到這個內部圖像(非常淺藍色)及其角落: http : //www.davincispainting.com
不幸的是,我無法使用CSS3。
這是HTML:
<body>
<div id="global-wrap>
<div id="global-inner">
<div class="topleft">
</div>
<div class="topright">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br style="clear: both" />
<div id="bottom-wrap"></div>
<div class="bottomleft">
</div>
<div class="bottomright">
</div>
</div>
</div>
</body>
這是相關的CSS:
body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}
我如何為2個CSS項目實現此角落?
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>
#global-inner
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/
width:536px;
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;
}
使用jQuery圓角插件。
它在包括IE在內的所有瀏覽器中都受支持。 它使用嵌套的div(沒有圖像)在IE中繪制角落。 它還支持瀏覽器中的原生邊界半徑舍入(Opera 10.5 +,Firefox,Safari和Chrome)。 因此,在這些瀏覽器中,插件只是設置了一個css屬性。
您需要在</body>
之前包含jQuery和Corner js腳本。 然后編寫你的jQuery,如$('div,p')。corner('10px'); 放在''之前。 所以你的HTML看起來像下面的代碼。 這里我正在為所有div
和p
標簽制作圓角。 如果你想為特定的id或類做,那么你可以做一些像$('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
.rounded {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
希望有幫助:)
您可以使用jQuery Curvy Corners插件。 它將在現代瀏覽器中使用CSS3版本,但是對於沒有css3 border-radius(IE aso)的瀏覽器,該插件使用javascript創建邊框半徑。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.