官方介绍:

浏览器支持:IE9+, Firefox 4+, Chrome, Safari 5+,和Opera支持border-radius属性。

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性

提示: 这个属性允许你为元素添加圆角边框!

css语法:

border-radius: - length|% / - length|%;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

js语法:

object.style.borderRadius="5px"

例子:

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

斜杠/分开后面的参数是怎么回事呢?是这样子的,第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,所以你现在就可以画一个左右不对称的圆角啦:

.div1{border-radius: 2em/1em}

看到这里你会不会以如果四个圆角都要分别制定特殊的形状,是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那个四个参数一样的设定(我就是这么以为的),答案是错!误!的!因为官方的解释就是前面放1-4后面放1-4啊!

.div1{
border-radius:10px 20px 30px 40px/40px 30px 20px 10px
}

按顺时针的顺序,斜杠/左边是四个圆角的水平半径,右边是四个圆角的垂直半径,但是通常我们很少写右边的参数,那就是默认右边等于左边的值。当然你也可以省略一些值,比如这样子写.div1{border-radius: 2em 1em 4em / 0.5em 3em;},解析顺序你就可以按照上面的自己推算一下啦。

然后再回到张老师的那个-weibkit前缀下的问题{-webkit-border-radius:30px 10px}实际上就等于{border-radius:30px/10px}

附图:

css奇技淫巧—border-radius的更多相关文章

  1. 重温CSS:Border属性

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

  2. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  3. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  4. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  5. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  6. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  7. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  8. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  9. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

随机推荐

  1. loj515贪心只能过样例

    bitset练习题... 位运算真的是玄学... 一开始真的“只能过样例” 后来发现把左移写成了小于号 鬼知道我在想什么/手动微笑 loj第一题 #include<iostream> #i ...

  2. ORACLE 强制索引

    在一些场景下,可能ORACLE不会自动走索引,这时候,如果对业务清晰,可以尝试使用强制索引. 使用强制索引,在SELECT 后面加上/*.......*/ 中间加上索引的属性,代码如下: SELECT ...

  3. 1014 Waiting in Line (30)(30 分)

    Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...

  4. PLSQL Developer安装、配置、连接oracle数据库

    0.资源准备 1) PLSQL Developer安装包(由于安装包超过10M,无法上传,请自行下载) 2) instantclient_11_2安装包(由于安装包超过10M,无法上传,请自行下载) ...

  5. javascript之原型prototype

    理解JavaScript原型 http://blog.jobbole.com/9648/ Web程序员应该知道的Javascript prototype原理 http://www.leonzhang. ...

  6. 洛谷 P4547 & bzoj 5006 随机二分图 —— 状压DP+期望

    题目:https://www.luogu.org/problemnew/show/P4547 https://www.lydsy.com/JudgeOnline/problem.php?id=5006 ...

  7. 【转】 Pro Android学习笔记(五五):调试和分析(3):adb命令、模拟器控制台和StrictMode

    目录(?)[-] adb命令 模拟器Console StrictMode adb命令 我们在学习SQLite的使用,介绍过部分adb命令的使用,见Pro Android学习笔记(五):了解Conten ...

  8. 从生成文件对比两种创建虚拟机的方式:boot from image和boot from bootable-volume

    1. 创建bootable-volume(参考:http://docs.openstack.org/grizzly/openstack-compute/admin/content/instance-c ...

  9. 接口Comparator和Comparable的区别和联系

    1. Comparator 和 Comparable 相同的地方 他们都是java的一个接口, 并且是用来对自定义的class比较大小的. 什么是自定义class: 如 public class Pe ...

  10. JVM类加载(2)—连接

    2.连接 连接就是将已经加载到内存中的类的二进制数据合并到Java虚拟机的运行时环境中去,加载阶段尚未完成,连接阶段可能已经开始.连接阶段包含验证.准备.解析过程. 2.1.验证 验证.class文件 ...