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

谢谢大家

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

  1. httpd三种MPM的原理剖析

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  2. Spark剖析-宽依赖与窄依赖、基于yarn的两种提交模式、sparkcontext原理剖析

    Spark剖析-宽依赖与窄依赖.基于yarn的两种提交模式.sparkcontext原理剖析 一.宽依赖与窄依赖 二.基于yarn的两种提交模式深度剖析 2.1 Standalne-client 2. ...

  3. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  4. Android编程之Listener侦听的N种写法及实现原理

    写下这个题目时突然想起鲁迅笔下的孔乙已,茴香豆的几种写法,颇有些咬文嚼字的味道.虽然从事手机编程多年,但一直使用的是C和C++编程,由于安卓早期只支持JAVA开发,所以对于时下如火如荼的安卓系统,我一 ...

  5. ARouter原理剖析及手动实现

    ARouter原理剖析及手动实现 前言 路由跳转在项目中用了一段时间了,最近对Android中的ARouter路由原理也是研究了一番,于是就给大家分享一下自己的心得体会,并教大家如何实现一款简易的路由 ...

  6. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  7. Android Listener侦听的N种写法

    Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用 ...

  8. JS面向对象的几种写法

    JS 中,面向对象有几种写法.归纳下,大概有下面这几种:工厂模式,构造函数模式,原型模式,构造函数与原型模式的混合使用,原型链继承,借用构造函数继承. 一.工厂模式 function person ( ...

  9. 【Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析】

    原文:[Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析] [注意:]团队里总是有人反映卸载Xamarin,清理不完全.之前写过如何完全卸载清理剩余的文件.今天写了Windows下的批命令 ...

随机推荐

  1. 检测到有潜在危险的 Request.Form 值。 说明: ASP.NET 在请求中检测到包含潜在危险的数据

    在请求方法的顶部添加        [ValidateInput(false)]就OK了 从客户端(Content=" sdfdddd ...")中检测到有潜在危险的 Reques ...

  2. 霍夫变换(hough transform)

    x-y轴坐标:y=kx+b k-b轴坐标:b=-xk+y θ-r轴坐标:

  3. WPF——数据绑定(二)绑定方法—绑定本地对象

    注意:本人初学WPF,文中表达或技术性问题请勿见怪,欢迎指正,谢谢 标记拓展语法:绑定到本地对象 什么是绑定到本地对象,我个人理解就是实现UI层上两个或多个控件的相互关联,一个控件的状态改变,导致另一 ...

  4. 20145120 《Java程序设计》第6周学习总结

    20145120 <Java程序设计>第6周学习总结 教材学习内容总结 java.io.InputStream.java.io.OutputStream实例分别作为输入.输出串流的代表对象 ...

  5. 软件工程随堂小作业——最优惠价钱(C++)

    一.设计思路 前提,没有买重复书的情况是最优惠的.总共买n本书,可以分解成5k+(n-5k),k=0,1,2,...1.如果k=0,n本不重复的价钱是最优惠的:2.如果k=1,算出每一种情况的折扣并比 ...

  6. 嵌套回调异步与$.Deferred异步

    HTML: <input type="button" id="btn1" value="嵌套回调异步"> <input t ...

  7. linux设备驱动第五篇:驱动中的并发与竟态

    综述 在上一篇介绍了linux驱动的调试方法,这一篇介绍一下在驱动编程中会遇到的并发和竟态以及如何处理并发和竞争. 首先什么是并发与竟态呢?并发(concurrency)指的是多个执行单元同时.并行被 ...

  8. 剑指offer--面试题22

    关键在于思路,  需要两个输入向量,而函数中需要一个辅助栈! 思路:以待判出栈序列为基础,逐个判断它与栈顶元素是否相等,相等则弹出且j++,这表明此元素可为出栈顺序元素,不相等则栈元素不断入栈,直至相 ...

  9. Leetcode#61 Rotate List

    原题地址 我一直不太理解为什么叫rotate,翻译成"旋转"吧,似乎也不像啊.比如: 1->2->3->4->5->NULL 向右旋转2的距离,变成了 ...

  10. Deep Learning: Assuming a deep neural network is properly regulated, can adding more layers actually make the performance degrade?

    Deep Learning: Assuming a deep neural network is properly regulated, can adding more layers actually ...