在CSS中做出圆角矩形并不复杂，常用方法就是给元素设置尺寸或内边距、背景色或边框，再配合border-radius。下面直接按步骤说明怎么写，并补充四个角分别设置和常见问题排查，照着写就能做出来。

想在页面里做出圆角矩形，可以直接按步骤来写。第一步，先准备一个元素，比如div或button。第二步，给它设置宽高，或者用padding把内容区域撑开。第三步，添加背景色或边框，让矩形轮廓能被看见。第四步，设置border-radius，这一步就是把原本的直角变成圆角。只要元素本身有可见区域，圆角矩形效果就会立即显示出来。

• 先创建一个元素，例如div、a、button都可以
• 设置宽度和高度，或者用padding撑开内容区
• 添加背景色或边框，方便观察矩形轮廓
• 最后写border-radius控制圆角大小

如果你只是想快速做出一个标准圆角矩形，最基础的写法如下，直接复制就能运行。border-radius的标准写法就是给元素写一个长度值，比如12px，表示四个角统一使用12px圆角。

• 下面这个示例适合初学者直接练习
• width和height决定矩形大小
• background让圆角边缘更容易看出来
• border-radius: 12px就是最常见的统一圆角写法

• 示例代码：

  圆角矩形
  
  .box {
    width: 200px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #4f86ff;
    color: #fff;
    border-radius: 12px;
  }

• 如果不想写固定高度，也可以改成padding写法：

  .box {
    display: inline-block;
    padding: 16px 24px;
    background: #4f86ff;
    color: #fff;
    border-radius: 12px;
  }

如果四个角不想完全一样，可以直接使用四值写法，顺序是左上、右上、右下、左下。比如border-radius: 16px 16px 4px 4px，表示上面两个角更圆，下面两个角更小。除了这种简写方式，也可以单独控制某一个角，例如border-top-left-radius就是设置左上角。这样适合卡片、标签、聊天气泡这类需要局部变化的样式。

• 四值写法顺序是左上、右上、右下、左下
• 统一写法示例：border-radius: 12px 12px 4px 4px;
• 单角写法示例：border-top-left-radius: 16px;
• 单角写法示例：border-bottom-right-radius: 2px;

• 一个实际场景代码：

  .card {
    width: 240px;
    padding: 20px;
    background: #f5f7fb;
    border: 1px solid #d8e0ef;
    border-radius: 18px 18px 6px 6px;
  }

• 如果想分别单独写，也可以这样：

  .card {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

很多人不是不会写border-radius，而是写了以后看不出来。这时不要只怀疑属性本身，先按常见场景逐项排查。第一类是元素没有背景色或边框，圆角其实已经生效，只是视觉上不明显。第二类是元素没有明确尺寸，只有少量文字，导致可见区域太小。第三类是子元素溢出，把父元素的圆角边缘破坏了，这时通常要加overflow: hidden。现代浏览器对border-radius支持已经很成熟，Chrome、Edge、Safari、Firefox都可以正常使用，普通项目一般不需要再额外处理兼容前缀。

• 问题一：没有背景或边框时，圆角不容易被看见

• 错误写法：

  .box {
    border-radius: 12px;
  }

• 修正写法：

  .box {
    width: 200px;
    height: 80px;
    background: #4f86ff;
    border-radius: 12px;
  }

• 问题二：没有尺寸或内边距，区域太小不明显

• 错误写法：

  .box {
    background: #4f86ff;
    border-radius: 12px;
  }

• 修正写法：

  .box {
    display: inline-block;
    padding: 12px 20px;
    background: #4f86ff;
    border-radius: 12px;
  }

• 问题三：子元素溢出，破坏父元素圆角边缘

• 修正写法：

  .parent {
    width: 220px;
    border-radius: 16px;
    overflow: hidden;
  }
  
  .parent img {
    display: block;
    width: 100%;
  }

• 兼容性方面，现代主流浏览器都支持border-radius，正常写标准属性即可

如果你只是想快速做出圆角矩形，最直接的方法就是先写元素，再加尺寸或padding、背景或边框，最后设置border-radius。先用统一圆角练熟基础写法，再根据需要改成四值写法或单角写法，同时记住背景、尺寸和溢出这三类常见排查点，基本就能解决大多数CSS圆角问题。

《夸克》非常好用的免费AI浏览器

下载APP查看