1.使用px:

圆的半径是那个px值大小 用这个圆放到div的角上去切割div

2.使用%:

如果长度和宽度一样 圆的半径是长度乘这个百分比得到的结果

如果长度和宽度不一样 产生的效果是宽高乘以百分数后得到的r1和r2，作为两套半径绘出的椭圆产生的弧度 用这个椭圆去切割

border-radius 如何计算的更多相关文章

  1. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. HTML&&css面试题

    HTML&css相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套. XH ...

  3. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  4. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  5. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  6. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  7. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

  8. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  9. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  10. CSS模版收集

    Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...

随机推荐

  1. Excel如何通过关键字模糊匹配查找全称

    打开excel,以其素材为例,通过关键字模糊匹配查找全称.   在公司名下输入公式:=LOOKUP(1,0/FIND(D2,A2:A5),A2:A5),按回车键确定即可.   FIND(D2,A2:A ...

  2. 原生ajax与伪ajax

    原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...

  3. C++ constexpr

    1.constexpr 1.const与constexpr: const: 承若不改变这个值,主要用于说明接口,这样在把变量传入函数时就不必担心变量会在函数内被改变了,编译器负责确认并执行const的 ...

  4. 前端开发-css基础入门

    CSS  cascading(层叠) style(样式) sheet(表) css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式 <!-- 1.行间样式 --> <div ...

  5. Python 操作sqlite数据库及保存查询numpy类型数据（二）

    # -*- coding: utf-8 -*- ''' Created on 2019年3月6日 @author: Administrator ''' import sqlite3 import nu ...

  6. flutter 基础组件

    TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...

  7. 原生js禁止页面滚动

    // 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...

  8. Kafka---系统学习

    1.Topics 1.1.Topic  就是  数据主题: 1.2.作用:数据记录  发布的地方,用来  区分 业务系统: 1.3.每个Topic  可以有多个 消费者 订阅它的数据: 1.4.每个T ...

  9. springboot+mybatis 配置sql打印日志

    第一种: 配置类型 # 配置slq打印日志 logging.level.com.lawt.repository.mapper=debug重点: #其中   com.lawt.repository.ma ...

  10. day5 函数

      1.求全部元素的和 [1,2,1,2,3,3,3,3] 遍历 a = [1,2,1,2,3,3,3,3] sum = 0 n = len(a)-1 while n>=0: sum += a[ ...