网页设计之CSS边框圆弧设计使用技巧

2022-08-19    分类: 网站建设

作为一名合格的网页设计师,前端CSS样式的书写都是基本功,圆角弧度的掌握新手往往很慢把握,那么如何用CSS创建非常酷的圆弧效果?今天成都网站设计专家创新互联给大家分享设计经验。

一、CSS样式border边框特性、单值

让我们从基础开始,希望这不会让你厌烦,您可能熟悉CSS,也知道边界半径。它已经存在多年了,主要用于像这样的单值:border-radius:1em,它可能是2010年CSS3最受讨论/喜爱的特性之一,当你只使用一个值时,所有的角都会被这个值所包围:

1

可以在上面的例子中看到的,在固定长度值如px、rem或em旁边,您还可以使用百分比。通常是通过设置边界半径为50%来创建一个圆。百分比值基于给定元素的宽度和高度。所以当你在一个矩形上使用它时,你将不再有对称的角。这里有一个例子,展示了边框半径:110px和边框半径:30%应用于矩形之间的区别。

2

二、Border边框四个不同的值

当您使用多个值时,您将开始为每个角设置值,从左上角开始,然后顺时针移动。同样,您也可以使用百分比,还可以将百分比与固定长度值混合。

3

三、斜杠分隔的8个值

我想你们大多数人已经做了我上面解释的所有事情,现在我们进入令人兴奋的部分。如果使用斜杠分隔值并指定最多8个值,会发生什么情况?让我们看看,说明书是怎么说的:

如果在斜杠之前和之后给出值,那么斜杠之前的值设置水平半径,斜杠之后的值设置垂直半径。如果没有斜杠,则值设置为相等的半径。

斜杠前面的值表示水平距离,而斜杠后面的值表示垂直长度。但这意味着什么呢?还记得矩形的百分比吗?垂直距离和水平距离以及不对称圆角的绝对值不同,这正是使用斜杠语法时得到的结果,因此当你比较边界半径:4em 8em和边界半径:4em / 8em时,结果是完全不同的。

4

左边对称的角是圆的四分之一,而右边不对称的角是省略的一部分。

说实在的你得到的形状有点奇怪。但是要记住你用边界半径创建的圆圈:50%。你会得到一个圆,因为定义一边的两个值加起来等于99.99%(50% + 50% = 99.99%),并且没有留下直线,这让你想起了原来的正方形。如果您将相同的逻辑应用到完整的8个值边界半径语法中,您可以创建一个看起来有点像plectrum或有机单元格的形状:

5


总结:图像是通过使用支持良好的边界半径设置成圆的,不要忘记旧的CSS仍然存在并且非常有用,你不需要为每个效果都使用一些花哨的东西。

标签:成都网页设计成都网页制作 创新互联

当前题目:网页设计之CSS边框圆弧设计使用技巧
分享网址:https://www.cdcxhl.com/news/191461.html

成都网站建设公司_创新互联,为您提供用户体验网站建设网站改版商城网站做网站标签优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设