在制作网页的过程中css 左上角圆角,有时我们可能需要实现圆角的效果。 最初的方法是利用多张背景图片来实现圆角。 CSS3出现之后,就不用那么麻烦了。 CSS3提供了一系列属性来设置元素的圆角效果css 左上角圆角,如下:
上述函数的可选值如下表所示:
数值描述
长度
通过向单位添加值来定义圆角的形状
百分比
根据比率定义圆角的形状
border-*-radius 通过前面的介绍,我们知道,通过border-*-radius系列函数,我们可以分别为元素的四个角设置圆角效果。 函数的语句格式如下:
边框-*-半径:[|
]{1,2}
该句型的含义是需要为border-*-radius属性提供1~2个参数,参数之间用空格分隔。 第一个参数表示圆角在水平方向的直径或半轴,第二个参数表示圆角在垂直方向的直径或半轴。 如果省略第二个参数,则该参数将直接继承第一个参数的值。
图:元素四个角
【示例】使用四个border-*-radius属性为元素设置圆角效果:
div { width: 350px; height: 100px; padding: 15px 0px 0px 25px; } .one { 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; background-color: #CCC; margin-bottom: 10px; } .two { border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; background-color: #888; }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;border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
运行结果如右图所示:
图:border-*-radius属性演示
border-radius border-radius属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius这四个属性的缩写。 您可以使用 border-radius 还设置四个 border-*-radius 属性。 border-radius属性的格式如下:
边框半径:[|
]{1,4}[/[|
]{1,4}]?
句型如下:
【示例】使用 border-radius 属性为元素设置圆角效果:
ul { margin: 0; padding: 0; } li { list-style: none; margin: 10px 0 0 10px; padding: 10px; width: 200px; float: left; background: #bbb; } h2 { clear: left; } .test .one { border-radius: 10px; } .test .two { border-radius: 10px 20px; } .test .three { border-radius: 10px 20px 30px; } .test .four { border-radius: 10px 20px 30px 40px; } .test2 .one { border-radius: 10px/5px; } .test2 .two { border-radius: 10px 20px/5px 10px; } .test2 .three { border-radius: 10px 20px 30px/5px 10px 15px; } .test2 .four { border-radius: 10px 20px 30px 40px/5px 10px 15px 20px; }水平与垂直半径相同时:
- 提供1个参数
border-radius:10px; - 提供2个参数
border-radius:10px 20px; - 提供3个参数
border-radius:10px 20px 30px; - 提供4个参数
border-radius:10px 20px 30px 40px;
水平与垂直半径不同时:
- 提供1个参数
border-radius:10px/5px; - 提供2个参数
border-radius:10px 20px/5px 10px; - 提供3个参数
border-radius:10px 20px 30px/5px 10px 15px; - 提供4个参数
border-radius:10px 20px 30px 40px/5px 10px 15px 20px;
运行结果如右图所示:
图:border-radius属性演示