border-radius CSS繪製圓形、橢圓形

border-radius CSS繪製圓形、橢圓形

CSS border 語法介紹:border: 邊框粗細 邊框顏色 邊框樣式

語法範例 <div style="border:5px #FFAC55 solid;"/>這是邊框測試</div>

border: 5px solid red
border-radius:40px 0px 40px 0px border: 5px solid yellow
border-radius: 0px 40px 0px 40px border: 5px double magenta
border-radius: 40px 40px 40px 40px border: 10px dotted magenta
border-radius:50% 0px 0px 50% border: 10px groove olivedrab
border-radius:0px 50% 50% 0px; border: 10px ridge pink
border-radius:50% 50% 50% 50%

border: 3px solid black
border-radius:20px 0px 0px 0px border: 10px inset pinkk
border-radius:0px 20px 0px 0px border-style: dotted dashed solid double
border-radius:0px 0px 0px 20px border-style: inset
border-color: red
border-width:10px 10px 10px 10px border-style: outset
border-color: red
border-width:10px 10px 10px 10px

border-style 屬性指定邊框的樣式。
實線 p {border-style:solid;} 虛線 p {border-style:dashed;} 雙線 p {border-style:double;} 點線 p {border-style:dotted;} 凹線 p {border-style:groove;} 凸線 p {border-style:ridge;} 嵌入線 p {border-style:inset;} 嵌入線 p {border-style:outset;}

圓形
<img src="XXX.jpg" style="border-radius: 100px; height: 100px; width: 100px; >

橢圓形
<img style="width: 150px;height: 100px;border-radius: 150px;" src="xxx.jpg" />

右半圓形
<img style="border-radius: 50px 0 0 50px; height: 100px; width: 50px;" src="xxx.jpg" />

左半圓形
<img style="border-radius: 0 50px 50px 0; height: 100px; width: 50px;" src="xxx.jpg" />

四分之一圓形
<img style="border-radius: 50px 0 0 0; height: 100px; width: 50px;" src="xxx.jpg" />

#html CSS border-radius#html CSS border#html border: 邊框粗細 邊框顏色 邊框樣式