css3的新属性border-radius的用法
来源:互联网 发布:2017淘宝法律法规纳税 编辑:程序博客网 时间:2024/06/05 02:33
在css3中,它为我们提供了以往需要在js才能的实现的效果的方法。就如现在我们将要讲的border-radius,它是css3提供给我们的可以设置边框形状的属性。一般来说它是这样使用的:
button{ border-radius: 10px /*后面的参数也可以写成百分号形式,如10%*/}这样子我们得出的效果是这样的
但是如果说我想弄更加复杂点,比如类似如下这样的:
这个我们该怎么做呢?其实在border-radius中,它分为四个方向,按顺序来的话是左上、右上、右下和左下,所以按照这样子我们可以这样写:
button{ border-radius: 50% 0 50% 50%;}这种写法等价于下面这种写法:
button{ border-top-left-radius: 50%; border-top-right-radius: 0; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;}不过除此以外,border-radius可还没完,border-radius和它的相关的一些属性有第二个参数,一般如果不写这个参数的话第二个参数的值和第一个参数的值相等,第一个参数我们叫做水平半径,第二个参数我们叫做垂直半径。写入如下:
button{ border-radius: 50%/20%;}得出的结果和单纯用一个参数的有很大区别。在border-radius的相关的属性如上面的四个属性中也可以这样使用。
border-radius可以像下面那样这样子写法:
button{border-radius: 2em 1em 4em / 0.5em 3em;}第一个参数内有三个值,分别表示的是左上、右上和左下、右下,第二个参数的值分别表示为左上和右下、右上和左下,所以上面的表达式等价于:
button{ 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;}
阅读全文
0 0
- css3的新属性border-radius的用法
- CSS3的border-radius属性详解
- CSS3圆角(border-radius)的用法
- div边框弧形设计,radius的用法,CSS3 border-radius 属性
- CSS3新属性 border-radius版企鹅
- CSS3 border-radius 属性
- CSS3 border-radius 属性
- CSS3 border-radius属性
- CSS3 border-radius属性
- css3的border-radius圆角
- CSS3 border-radius的威力
- css3中的边框圆角border-radius的用法
- IE浏览器兼容CSS3新属性border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之border-radius
- 简单实现Fragment回退栈效果
- 假设表达式中包含三种括号 圆括号方括号大括号 设计一个算法用顺序栈判断表达式中的括号是否正确配对
- Android开发优秀开源项目汇总(不断更新)
- 事件
- Android和H5之间的交互
- css3的新属性border-radius的用法
- python日期与时间
- Android动态加载Jar
- node路径
- CSS及JS文档中文注释代码在浏览器中显示乱码
- 正则表达式
- 读深入理解Java虚拟机
- 使用FileProvider共享文件
- 原生js实现ajax的用户简单登入