你的位置:首页 > 网页设计

[网页设计]css3 border


前缀对应浏览器

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

border-radius:

<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>

可见设置50%和设置50px这样的固定值还是有差别的,没研究百分比以什么为参考,所以现在不知道怎样通过百分比设置一个左半圆。

 

参考:

https://css-tricks.com/almanac/properties/b/border-radius/