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

  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.1K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    9.4K0
  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    2.1K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    5.2K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    6.8K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    2.3K0

发表回复

登录后才能评论