当前位置: 代码迷 >> 综合 >> CSS 的 border-radius
  详细解决方案

CSS 的 border-radius

热度:39   发布时间:2024-02-12 14:37:07.0

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;
以这两个属性的为例,如果两个属性的水平半径之和超出了元素的宽度,那么两个圆的圆心在同一条直线上,这条直线的位置处于将元素的边按照两圆的半径占据的比例分割线上。当半径超出的宽度的时候,圆心处于位置边上不再移动,开始移动圆与另一个边的交点。(<---- 推测)

  相关解决方案