HTML中的边界半径与SVG绘制

在HTML和SVG中，有时候需要为元素设置圆角，可以使用边界半径（border-radius）属性。本文将介绍边界半径的基本使用和SVG绘制圆角的方式。

HTML中边界半径的基本使用

在HTML中，使用border-radius属性可以设置元素的圆角。可以设置四个角的圆角半径，也可以设置两个相对角的圆角半径。

设置单个角的边界半径

<div style="border-radius: 10px 0 0 0;">top-left corner</div>
<div style="border-radius: 0 10px 0 0;">top-right corner</div>
<div style="border-radius: 0 0 10px 0;">bottom-right corner</div>
<div style="border-radius: 0 0 0 10px;">bottom-left corner</div>

设置两个相对角的边界半径

<div style="border-radius: 10px 0 0 10px;">top corners</div>
<div style="border-radius: 0 10px 10px 0;">bottom corners</div>

可以使用百分比

<div style="border-radius: 50% 0 0 0;">half-circle top-left corner</div>

SVG中绘制圆角

在SVG中，设置rx和ry属性可以绘制圆角矩形和圆。

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" />
  <circle cx="50" cy="50" r="40" />
</svg>

总结

以上就是在HTML中使用边界半径设置圆角和在SVG中绘制圆角的方法介绍。大家可以根据项目需求选择对应的方式进行实现。