小猪乔治和border-radius

2018-06-15 admin

概述

之前看了一篇关于用CSS来画小猪佩奇的文章,抱着锻炼自己的心态造了个轮子,画了个佩奇的小弟乔治,效果可以看这里,源码在这里

开发过程中也让我对border-radius这个属性有了更深刻的理解。

border-radius

以前我在使用这个属性时,只知道这个是表示圆角,常用border-radius: 5px实现圆角长方形或者border-radius: 50%来画圆形。在开发小猪的过程中,会需要使用许多不太规则的形状,因此需要了解该属性更深入的原理,才能满足我的开发需求。

完全体

该属性的完全体如下:

border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;

即任何值都可以转为该种形式。例如,border-radius: 50%等价于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name这8个值分别代表什么含义呢?

矩形的四个圆角我们可以分别进行控制,例如矩形的左上圆角由x1y1来控制,将一个水平半径为x1,垂直半径为y1的椭圆与矩形左上角相切,相切的两个点之间的圆弧就是最终的圆角曲线。如下图所示。

clipboard.png

同理,x2y2控制右上角,x3y3控制右下角,x4y4控制左上角。控制的方式与左上角的类似。

小Tips

  1. 如果对应的xy值相等,则可以省略成border-radius: x1 x2 x3 x4的形式;如果这些x也都相等,则可以省略成border-radius: x1的形式。
  2. 当值使用百分比时,x取值是参照矩形的宽度,y是参照矩形的高度。比如宽200px,高100px的矩形,如果设置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%,转换成像素等价于border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px
  3. 当设置border-radius: 100%时,发现其表现与border-radius: 50%相同。这是因为如果水平方向的两个半径和(x1+x2或者x3+x4)大于宽度,或者垂直方向的两个半径和(y1+y3y2+y4)大于高度时,浏览器会对它们进行等比例缩小,知道不再超出为止。

开始绘图

在了解了border-radius的原理后,就可以开始绘制了。

主要有以下几个步骤:

  1. 找一张小猪乔治的图片参考
  2. 对图片中的部分进行分解,并逐一实现(废话)

其实掌握了border-radius后,这些步骤都不难了,细心绘制就可以完成啦。

我绘制的小猪乔治如图

clipboard.png

参考资料

原文链接:https://segmentfault.com/a/1190000015294726

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34085.html

文章标题:小猪乔治和border-radius

相关文章
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
javascript记住用户名和登录密码(两种方式)
下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。 第一种方式: CONTENT login.html welcome.html cookie.js common.js login.html &lt...
2017-03-29
2015 年, HTML5 和 IP 化
HTML5 2010 年 4 月,乔布斯发表了一篇公开信叫做 “Thoughts on Flash” 。里面提到 HTML5 必将统治 Web ( HTML5 will win )。 的确, HTML5 为 Web 带来更丰富的表现和功能。...
2015-11-12
Javascript中实现String.startsWith和endsWith方法
在操作字符串(String)类型的时候,startsWith(anotherString)和endsWith(anotherString)是非常好用的方法。其中startsWith判断当前字符串是否以anotherString作为开头,而e...
2017-03-24
基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下: 方法 一: <body> <h1>实现单选及多选的向右和向左移动</h1> &...
2017-03-27
浅谈JavaScript中指针和地址
个人理解:指针只是指向内存的一个索引;而地址则是内存中确切的位置。 下面是函数中关于指针和地址一个小例子: function sum(num1,num2){ return num1+num2; } alert(sum(10,10));  &...
2017-03-27
回到顶部