CSS border-radius 深入学习(含可视化生成工具)

没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。
border-radius 写法:

.box{
  border-radius: 30%; /* 也可以用PX代替 */
}

矩形的四角会变为相应数值的圆角,如下图:

CSS border-radius 深入学习(含可视化生成工具)

只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 px,百分比(%)就使用 rem, em这些单位。

让我们看看「border-radius: 110px」与「border-radius: 30%」的矩形会是什么样的,请看下图例子:

CSS border-radius 深入学习(含可视化生成工具)

注意右图的圆角是不对称的,后面文章我们再来看看。

用4个值的样式

当设置多个 border-radius 数值时,从左上角开始顺时针设置,您还可以使用百分比单位,甚至可以与固定值混合使用。

CSS border-radius 深入学习(含可视化生成工具)

用8个值的样式(这里变得有趣了)

Border-radius 最多可以使用8个数值,这就可以给设计师带来更多创意空间了,注意,需要作用斜杠「 / 」来分隔4个值,这是规范。

如果在斜杠前后设置一个值,则斜杠前面的值设置水平半径,斜杠后面的值设置垂直半径。如果没有斜杠,则该值将两个半径设置为相等。

因此,斜杠之前的值定义水平长度,而斜杠之后的值定义垂直长度。但是,这是什么意思?建议看下图更好的帮你理解。

CSS border-radius 深入学习(含可视化生成工具)

使用斜杠和不使用斜杠的区别

上图是比较「border-radius: 4em 8em」与「border-radius: 4em / 8em」的结果。请记住,如果要一个正方形变为圆形,那么可以直接这样写 「border-radius: 50%」 即可。

然后,你可以设置8个不同数值,就会得到一个像「有机体」的形状。

CSS border-radius 深入学习(含可视化生成工具)

CSS border-radius 深入学习(含可视化生成工具)

上图是四个重叠的椭圆,构成最终的形状

CSS border-radius 在线产生器:https://9elements.github.io/fancy-border-radius/

CSS border-radius 深入学习(含可视化生成工具)

使用上面的工具你可以随意设置宽、高,还可以通过鼠标拖拽来改变8个角的数值,很方便的查看变化。

这就是《CSS border-radius 深入学习》的全部内容,希望你对border-radius有更多深刻的认识,并能学以致用。

本文转载自设计达人,原文链接: ,本文观点不代表125jz立场。

(0)
江山如画的头像江山如画管理团队
上一篇 2019年10月17日 下午8:41
下一篇 2019年10月21日 下午5:59

99%的人还看了以下文章

  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    3.0K0
  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    2.9K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    7.7K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    4.8K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    1.9K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    2.1K0

发表回复

登录后才能评论