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%的人还看了以下文章

  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.6K0
  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 JS实现开关效果,可单选和组选|www.125jz.com

    2018年7月29日
    2.2K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    4.3K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    1.8K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    2.8K0
  • 第3课:颜色与背景

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

    2020年2月22日
    2.4K0

发表回复

登录后才能评论