争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

css <basic-shape>的基本形状函数有哪一些?如何使用?

时间:2022-11-4作者:未知来源:争怎路由网人气:

farthest-side

circle()函数用于定义圆。问号表明两个参数都是可选的,可以省略。如果省略一个,则浏览器将该参数设置为其默认值。

如果省略position参数,则圆的中心将位于其使用的元素的中心。你可以使用与background-position属性语法相同的语法指定位置。该position参数前面是单词at。

shape-radius参数指定圆的半径。它可以设置为绝对长度或百分比。此处的百分比值是从参考框的使用宽度和高度中解析出来的。不允许使用负值。

除了使用长度和百分比指定圆的半径外,还可以使用以下两个关键字之一来设置:closest-side或furthest-side。closest-side是默认值,这意味着,如果省略此参数并且未指定圆的半径,则浏览器将使用从元素中心到任何维度中最近边的长度作为半径的长度。farthest-side使用从中心到最远侧的长度。

下图说明了在视觉上的半径值closest-side和farthest-side半径值的对比:

1.jpg

以下是所有有效的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>的基本形状函数有哪些?如何运用?




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版