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>Copy after login |
||||||||||
| -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/
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
