Home > Article > Web Front-end > css3 border-radius_html/css_WEB-ITnose
css3 border-radius_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:391058browse
The prefix corresponds to the browser
| Browser
| ||||||||||
| -webkit
| <style type="text/css">div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }div.same{ height:100px; width:50px; background:#9da;}.semi-circle{ border-radius:50px 0 0 50px; }.test{ border-radius: 50% 0 0 50%;} </style><body><div class="circle"></div><br/><div class="same semi-circle "></div><br/><div class="same test"></div></body>chrome and safari |
||||||||||
| -moz | firefox | ||||||||||
| -ms | IE | ||||||||||
| -o | opera |
border-radius:
It can be seen that there is still a difference between setting a fixed value such as 50% and 50px. I have not studied what the percentage is as a reference, so now I don’t know how to set a left semicircle through the percentage.
Reference:
https://css-tricks.com/almanac/properties/b/border-radius/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn