border-radius几种写法的原理剖析

  1. border-radius:40px;
  2. border-radius:40px/20px;
  3. border-radius:40px 20px;
  4. border-radius:40px 20px 10px 5px;

今天主要是测试上面四种border-radius的写法。


首先是第一种。

border-radius:40px;

这里设置了一个值，所以默认4个角都显示为半径40的圆角，蓝色方框为40像素宽的正方形。所以也就是相当于圆的半径。


第二种

border-radius:40px/20px;

这里除了40px外还加了一个 /20px 这里的意思是将圆角定义为椭圆，其实正圆本来不就是椭圆的一种特殊情形吗？这种表示虽然有，但是平常用的不多。


第三种

border-radius:40px 20px;

这种和第二种写法的区别是没有 / 符号，其意义和普通的设置边距什么的是一样的。就是代表上下左右的意思。不废话直接看图。


第四种

border-radius:40px 20px 10px 5px;

第四种是为了写出顺序，从左上角顺时针到左下角，就是border-radius属性的值的设置顺序。


转载请注明：来自博客园，manfredHu

谢谢大家

时间： 2024-10-25 08:40:26

border-radius几种写法的原理剖析的相关文章

MapReduce/Hbase进阶提升(原理剖析、实战演练)

什么是MapReduce? MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)",和他们的主要思想,都是从函数式编程语言里借来的,还有从矢量编程语言里借来的特性.他极大地方便了编程人员在不会分布式并行编程的情况下,将自己的程序运行在分布式系统上. 当前的软件实现是指定一个Map(映射)函数,用来把一组键值对映射成一组新的键值对,指定并发的Reduce(归约)函数,用来保证所有映射的键值对中的每一

EventBus的使用和原理剖析

尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38174537 代码下载:http://download.csdn.net/detail/yuanzeyao2008/7684041 在编程过程中,当我们想通知其他组件某些事情发生时,我们通常使用观察者模式,正式因为观察者模式非常常见,所以在jdk1.5中已经帮助我们实现了观察者模式,我们只需要简单的继承一些类就可以快速使用观察者模式,在Android中也有一个类似功能的开源库EventBu

Android Listener侦听的N种写法

Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用,其接口定义如下: [java] view plaincopyprint? public interface OnClickListener { /** * Called when a view has been clicked. * * @param v The view that was cli

清除浮动的原理剖析

常用的清除浮动的几种方法总结下: 1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性 2,给浮动元素设置 :after伪类,创建块元素,设置clear属性 3,给父元素设置浮动 4,给父元素设置overflow设置非visible值(auto,hidden) 5,给父元素的display设置为table-cell 7,在ie6,7中,设置zoom或者width,height来触发haslayout,使父元素包含浮动元素 原理剖析: 1,2方法之所以可以成功,是因为了clear属性

谈谈垂直分割线的几种写法

谈谈分垂直分割线的几种写法,我们对这种分隔线不会陌生,在项目需求中会经常遇到,我们来看看 下边的几种写法, 方法一: <div> <a href="">注册</a>|<a href="">登录</a> </div> 直接在文字中间插入短线字符: 优点:简单.直接.高效. 缺点:可控性差: 方法二: HTML: <div> <a href="" class=&

Koa框架实践与中间件原理剖析

Koa框架实践与中间件原理剖析 最近尝试用了一下Koa,并在此记录一下使用心得. 注意:本文是以读者已经了解Generator和Promise为前提在写的,因为单单Generator和Promise都能够写一篇博文来讲解介绍了,所以就不在这里赘述.网上资料很多,可以自行查阅. Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架.Koa的精妙之处就在于其使用generator和promise,实现了一种更为有趣的中间件系统,Koa的中间件是一系列generat

图像处理之基础---二维卷积运算原理剖析

卷积运算(Convolution)是通过两个函数f 和g 生成第三个函数的一种数学算子,表示函数f 与经过翻转和平移与g 的重叠部分的累积.如果将参加卷积的一个函数看作区间的指示函数,卷积还可以被看作是“滑动平均”的推广.假设: f(x),g(x)是R1上的两个可积函数,并且积分是存在的.这样,随着 x 的不同取值,这个积分就定义了一个新函数h(x),称为函数f 与g 的卷积,记为h(x)＝(f*g)(x). 两个向量卷积,说白了就是多项式乘法.下面用个矩阵例子说明其工作原理: a和d的卷积就是

Java中的静态代理、通用动态代理类以及原理剖析

代理模式和静态代理 在开发中,代理模式是常用的模式之一,一般来说我们使用的代理模式基本上都是静态代理,实现模式大致如下 : 我们以网络代理为例,简单演示一下静态代理的实现 : // 网络接口 interface Network { public void surfTheInternet(); public void gotoFacebook(); } // 普通网络 class CommonNetwork implements Network { @Override public void su

可拖动弹窗的JS和jQuery两种写法

最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频,这个demo中的例子是百度首页登录按钮的弹窗,如下图: 当点击左上角的登录按钮时,弹窗出现并自动居中,同时窗口可拖动的范围被限制在了可视区域内,即浏览器视窗的上下左右边界,弹窗无法移出移动出四个边界,也不会出现滚动条. 另一个效果就是,当改变窗口大小时,对话框自动居中. 这个视频中用了原生js,jQuery两种写法实现案例,但本质上,对话框居中,限制拖动范围的的计算思路是一致的. 为了简化页面,总结核心思路,我重新写了一个小demo,界