farthest-side
circle()函数用于定义圆。问号表明两个参数都是可选的,可以省略。如果省略一个,则浏览器将该参数设置为其默认值。
如果省略position参数,则圆的中心将位于其使用的元素的中心。你可以使用与background-position属性语法相同的语法指定位置。该position参数前面是单词at。
shape-radius参数指定圆的半径。它可以设置为绝对长度或百分比。此处的百分比值是从参考框的使用宽度和高度中解析出来的。不允许使用负值。
除了使用长度和百分比指定圆的半径外,还可以使用以下两个关键字之一来设置:closest-side或furthest-side。closest-side是默认值,这意味着,如果省略此参数并且未指定圆的半径,则浏览器将使用从元素中心到任何维度中最近边的长度作为半径的长度。farthest-side使用从中心到最远侧的长度。
下图说明了在视觉上的半径值closest-side和farthest-side半径值的对比:

以下是所有有效的circle()形状声明:
使用默认值:最近侧半径的圆,位于元素的中心
circle();半径为100px的圆,水平位于30%,垂直50%*
circle(100px at 30% 50%);定义半径为长度的一半的圆。最长的一边,位于元素坐标系上的坐标25% 25%
circle(farthest-side at 25% 25%);定义一个圆心,其中心位于500px,水平和垂直300px,半径为 10em
circle(10em at 500px 300px);ellipse()
语法:
ellipse()= ellipse([ < shape-radius > {2}]?[at < position > ]?)
/ *其中.. * /
<shape-radius> = <length> 关键词:css <basic-shape>的基本形状函数有哪些?如何运用?