本文主要是介绍CSS 的 border-radius,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
CSS的border-radius
border-radius: 10px 10px 10px 10px;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果只有三个值则依次为 左上角,右上角和左下角,右下角,如果只有两个值则依次为左上角和右下角,右上角和左下角。
上面的写法等效于
border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;
可以使用 border--radius 属性,指定每个角的半径。
border--radius: a b; 两个属性值依次分别代表水平半径和垂直半径。如果只写一个半径则代表两个半径相同。
border-top-left-radius: 10px;
border-top-right-radius: 10px;
以这两个属性的为例,如果两个属性的水平半径之和超出了元素的宽度,那么两个圆的圆心在同一条直线上,这条直线的位置处于将元素的边按照两圆的半径占据的比例分割线上。当半径超出的宽度的时候,圆心处于位置边上不再移动,开始移动圆与另一个边的交点。(<---- 推测)
这篇关于CSS 的 border-radius的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!