border-radius 值类型-百分比

　border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。
　我们知道在一个正方形内做一个面积最大的圆形，这个圆的半径就为正方形边长的一半。所以border-radius为50%时，则会形成圆。那么可能有人就会问，border-radius为100%时，对应圆的半径长度不就是正方形的宽高么，这种情况下，为什么还是会形成一个和值为50%一样的圆形呢。

　　其实这是W3C对于重合曲线有这样的规范：如果两个相邻角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。下面我们假定一个宽高为100px的正方形A。此时设置border-top-left-radius=100%；则正方形A会变成一个半径为100px的四分之一圆弧。

　　然后我们再给border-top-right-radius=100%。此时相邻的角的半径已经超过了对应的盒子的边的长度。浏览器需要重新计算。重新计算的规则是同时缩放两个圆角的半径知道他们刚好符合这个方形。 也就是说如果相邻圆角的半径都被设置成了大于50%，那浏览器会根据图形的实际情况做一些计算。保证圆角能够刚好适应图形。

建议+举例

  • 建议使用border-radius = 50% 来避免浏览器不必要的计算。
  • 值得注意的是在涉及到与圆角相关动画的情况下，值为50%和100%，在动画效果上会有不同。
  • 举例：http://jsbin.com/ruzizo/edit?html,css,output

border-radius:50%和100%的区别的更多相关文章

  1. border-radius:50%和100%究竟有什么区别

    之前写css圆形时总是直接设置border-radius为50%.后来看某css动画网站时发现作者都是用的100%.遂去了解了一下2者的差别. border-radius的值是百分比的话,就相当于盒子 ...

  2. 利用Java API生成50到100之间的随机数

    利用Java API生成50到100之间的随机数 /** * */ package com.you.demo; import java.util.Random; /** * @author Admin ...

  3. MySQL:如何选取Table中的50到100行

    MySQL:如何选取Table中的50到100行 使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,MySql已 经为我们提供了这样一个功能. ? 1 2 [sql] ...

  4. background-size值为cover和值为100%的区别

    background-size:100% 100%;---按容器比例撑满,图片变形: background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变. IE8及以下 ...

  5. MySql中varchar(10)和varchar(100)的区别

    背景 许多使用MySQL的同学都会使用到varchar这个数据类型.初学者刚开始学习varchar时,一定记得varchar是个变长的类型这个知识点,所以很多初学者在设计表时,就会把varchar(X ...

  6. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  7. width为auto或者100%的区别

    一.四个理论 1. 某div不显示设置宽度,那么width为auto. 2. 某div的width在默认情况设置的是盒子模型中content的值 3. 某div的width为100%表示的是此div盒 ...

  8. 关于Random(47)与randon.nextInt(100)的区别

    参考https://blog.csdn.net/md_shmily92/article/details/44059313 相关文章random.nextInt()与Math.random()基础用法 ...

  9. min-width:100%和max-width:100%的区别

    1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...

随机推荐

  1. RocketMQ ACL使用指南

    目录 1.什么是ACL? 2.ACL基本流程图 3.如何配置ACL 3.1 acl配置文件 3.2 RocketMQ ACL权限可选值 3.3.权限验证流程 4.使用示例 4.1 Broker端安装 ...

  2. Linux基础命令（二）

    6.cp copy 作用:复制文件 选项: -a 复制目录时使用并且可以保持属性不变,属性:属主,属组,权限 -r 复制目录时使用但是不可以保持属性不变 -p 保持属性不变 注意:其实只需要记一个-a ...

  3. 结合参数接收响应转换原理讲解SpringBoot常用注解

    一.常用注解回顾 1.1 @RequestBody与@ResponseBody //注意并不要求@RequestBody与@ResponseBody成对使用. public @ResponseBody ...

  4. 使用JSP脚本在页面输出九九乘法表

    <% int i,j; for(i=1;i<10;i++) { for(j=1;j<=i;j++) { out.println(i+"*"+j+"=&q ...

  5. 破解微擎安装，免费搭建微擎，免费破解微擎，微擎破解版本，最新版本V2.1.2，一键安装！！

    ​ 微擎是一款基于WEB2.0(PHP+Mysql)技术架构,免费开源的公众平台管理系统,一款致力于将小程序和公众号商业化.智慧化.场景化的自助引擎.微擎提供公众号.微信小程序.支付宝小程序.百度熊掌 ...

  6. nyoj 455-黑色帽子

    455-黑色帽子 内存限制:64MB 时间限制:1000ms 特判: No 通过数:4 提交数:7 难度:1 题目描述:         最近发现了一个搞笑的游戏,不过目前还没玩过.一个舞会上,每个人 ...

  7. Lombok 使用详解，简化Java编程

    前言 在 Java 应用程序中存在许多重复相似的.生成之后几乎不对其做更改的代码,但是我们还不得不花费很多精力编写它们来满足 Java 的编译需求 比如,在 Java 应用程序开发中,我们几乎要为所有 ...

  8. goland学习-go常用命令使用

    goland学习-go常用命令使用 1.跨平台编译:env GOOS=linux GOARCH=amd64 go build 2.获取go第三方包:go get -u github.com/go-sq ...

  9. 痞子衡嵌入式：恩智浦机器视觉模块OpenMV-RT那些事（1）- 初体验

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是机器视觉模块OpenMV-RT初体验. 近些年机器视觉应用一直是个很火的方向,想象一下机器如果能长上"眼睛",是不 ...

  10. 【记录】洛谷P1739-表达式括号匹配AC记

    题面请查看:https://www.luogu.org/problem/P1739 思路: 见到括号就搜索,搜到与它配对的括号为止,搜不到就输出NO 代码: #include <bits/std ...