html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月4日 星期日

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

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


圓形
<img style="width: 150px;height: 150px;border-radius: 150px;" src="https://4.bp.blogspot.com/-dFPRW5FY9BM/WTi8DWLfrAI/AAAAAAAAO2s/gwFptw9ftPk5ehB40cNzfVq5DAOhKCZJwCLcB/s120/20170602_001.jpg" />


橢圓形
<img style="width: 150px;height: 100px;border-radius: 150px;" src="https://4.bp.blogspot.com/-dFPRW5FY9BM/WTi8DWLfrAI/AAAAAAAAO2s/gwFptw9ftPk5ehB40cNzfVq5DAOhKCZJwCLcB/s120/20170602_001.jpg" />


右半圓形
<img style="border-radius: 50px 0 0 50px; height: 100px; width: 50px;" src="https://4.bp.blogspot.com/-dFPRW5FY9BM/WTi8DWLfrAI/AAAAAAAAO2s/gwFptw9ftPk5ehB40cNzfVq5DAOhKCZJwCLcB/s120/20170602_001.jpg" />


左半圓形
<img style="border-radius: 0 50px 50px 0; height: 100px; width: 50px;" src="https://4.bp.blogspot.com/-dFPRW5FY9BM/WTi8DWLfrAI/AAAAAAAAO2s/gwFptw9ftPk5ehB40cNzfVq5DAOhKCZJwCLcB/s120/20170602_001.jpg" />


四分之一圓形
<img style="border-radius: 50px 0 0 0; height: 100px; width: 50px;" src="https://4.bp.blogspot.com/-dFPRW5FY9BM/WTi8DWLfrAI/AAAAAAAAO2s/gwFptw9ftPk5ehB40cNzfVq5DAOhKCZJwCLcB/s120/20170602_001.jpg" />

沒有留言:

張貼留言