html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









尾部連結 hbbb(xx)

2018年3月4日 星期日

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: 邊框粗細 邊框顏色 邊框樣式

沒有留言:

張貼留言