圆角border-radius,其css如下

IE9+支持(就是ie6,ie7,ie8都不支持),默认值是0,不继承,可以像下面那样设置4个角的值,也可以单独设置,如 border-top-left-radius:2em;

         /*border-radius:后面跟1个值、2个值、3个值、4个值时的情况*/
/*1个值:四个角一样圆*/
border-radius:四个圆角一样的值; /*2个值,前:左上右下,后:右上左下*/
border-radius:左上角和右下角值 右上角和左下角值; /*3个数值*/
border-radius:左上角值 右上角和左下角值 右下角值; /*4个数值*/
border-radius:左上角值 右上角 右下角值 左下角值;

上面每个圆角都是标准的圆形来过渡的角,也可以用椭圆,x轴和y轴的值不相等,前面x,后面y,如下,/ 前面都是各个角的水平方向值,/ 后面是各个角的垂直方向的值

         div {
width: 300px;
height: 300px;
background: #FF9900;
/* /前面是圆角横向上的各个角的值 /后面是圆角竖向上的各个角的值 */
/* 利用横向和纵向不同,画个芒果 */
border-radius: 280px 30px 300px 80px / 270px 20px 300px 20px;
}

效果图如下:

-------------

这没什么难的,记忆一下即可。但是深入一下,还是很有讲究的。

问题1,div宽高皆为100px,border-radius:30px,这个30px是怎么工作的?换成50px,70px,甚至200px会有什么反应?

答:等于一个100px的正方形,然后用半径为30px的圆来过渡边角,如果要在大脑中有动态的效果的话,不妨如下图来理解,更加方便。

当圆角是30px的时候,效果如上,如果圆角为50px呢?各占用50px,则达到中间点了,变成一个圆了!如果div有边框10px呢,这border-radius为60px才是圆,如下图

如果border-radius为70px呢?明显,2个70是大于100的,这个角按70来画,另外一个角就不够用了

问题2,既然边框变圆了,形状改变了,面积改变了,那么对div里面的内容有什么影响呢?

答曰:视同不变!如下图

上面我们为了得到一个圆形,要担心有没有忽略padding,有没有忽略border-width,还要根据宽度值计算,唉!有个更简单的办法就是如下:

/*管它padding,border,width,有了这个值,正方形变成圆,长方形变成椭圆!!!是的,不用像素,用百分比 */
border-radius:50%;

CSS3 border-radius 圆角的更多相关文章

  1. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  2. CSS3边框与圆角

    1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...

  3. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  4. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  5. CSS3之border-radius圆角

    CSS3之border-radius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角.图片圆角效果.div css3 border-radius圆角样式教程篇. 一.css3单词与语法结构 ...

  6. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  7. CSS3属性之圆角效果——border-radius属性

    在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...

  8. CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  9. css3(border-radius)边框圆角详解

    传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...

  10. (二)CSS3应用 - 实现圆角

    html <link href="test.css" type="text/css" rel="stylesheet" /> & ...

随机推荐

  1. Python 闭包小记

    闭包就是能够读取其他函数内部变量的函数.例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“.在本质上,闭包是将函数内部和函数外部连接起来 ...

  2. ASP.NET Core中使用GraphQL - 第四章 GraphiQL

    ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 ASP ...

  3. Dalvik 虚拟机操作码

    Dalvik 虚拟机操作码 表中的vx.vy.vz表示某个Dalvik寄存器.根据不同指令可以访问16.256或64K寄存器. 表中lit4.lit8.lit16.lit32.lit64表示字面值(直 ...

  4. SLAM+语音机器人DIY系列:(三)感知与大脑——2.带自校准九轴数据融合IMU惯性传感器

    摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...

  5. SLAM+语音机器人DIY系列:(八)高阶拓展——1.miiboo机器人安卓手机APP开发

    android要与ROS通讯,一种是基于rosbridge,另一种是基于rosjava库. 相关参考例子工程 rosbridge例子: https://github.com/hibernate2011 ...

  6. 根据URL获取图片

    背景:今天因为生产环境的系统界面图片无法显示被领导叼了一波,之前用Hutool工具类解析URL获取图片的,在生产环境上跑了一个多月都正常,嘣,今天突然发现周六下午后的图片统统显示异常,之后改为用jav ...

  7. .net开源工作流ccflow从表数据数据源导入设置

    第1节. 关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow  .net开源工作流 第2节. 从表数据导入设置 1.1.1: 概要说明 在从表的使用中我一般都会用到从 ...

  8. GZIP压缩与解压

    public class GZIP { /** * 字符串的压缩 * * @param str * 待压缩的字符串 * @return 返回压缩后的字符串 * @throws IOException ...

  9. MyDAL - .IsExistAsync() 使用

    索引: 目录索引 一.API 列表 .IsExistAsync() 用于 单表 / 多表连接 查询 二.API 单表-便捷 方法 举例 1.单表-便捷, 判断是否存在方法 var date = Dat ...

  10. Linux学习历程——Centos 7 chmod命令

    一.命令介绍 chmod 命令,是Linux管理员最常用的命令之一,用于修改文件或目录的访问权限. Linux系统中,每一个文件都有文件所有者和所属群组,并且规定文件的所有者,所属群组,以及其他人队问 ...