2011年11月30日 星期三

CSS3 Borders - border-[top or bottom]-[left or right]-radius

CSS3 module: Border (選擇其中一角做圓角)
參考資料:W3C module Border

border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

<style type="text/css"> 
.classBorderB
{
 width:220px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:20px; 
}

#testDiv1
{
 border:2px solid;
 border-top-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv4
{
 border:2px solid;
 border-top-left-radius:10px;:10px;
 -moz-border-top-left-radius:10px; /* Firefox */
 -webkit-border-top-left-radius:10px; /* Safari and Chrome */
 -o-border-top-left-radius:10px; /* Opera */
}
#testDiv2
{
 border:2px solid;
 border-bottom-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv3
{
 border:2px solid;
 border-bottom-left-radius:10px;
 -moz-border-bottom-left-radius:10px; /* Firefox */
 -webkit-border-bottom-left-radius:10px; /* Safari and Chrome */
 -o-border-bottom-left-radius:10px; /* Opera */
}

</style>
<div class="classBorderB" id="testDiv1">border-top-right-radius:10px;</div>
<div class="classBorderB" id="testDiv4">border-top-left-radius:10px;</div>
<div class="classBorderB" id="testDiv2">border-bottom-right-radius:10px;</div>
<div class="classBorderB" id="testDiv3">border-bottom-left-radius:10px;</div>

沒有留言:

張貼留言