欢迎来到晨铭在线-不正常电脑研究中心
0373-88888888

css3之border-radius浅析理解

时间:2017/8/15 15:35:23

border-radius是很常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。


border-radius使用

border-radius的数值有三种表示方法:px、%、em。

仅设置一个数值应该是我们最常用的一种情况,常用来给button加圆角边框,或者画一个圆形按钮,一个数值,即可给元素的四个边角设置统一的圆角弧度。

一个数值的border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式,因此,border-radius : 30px;,其实等价于border-radius : 30px 30px 30px 30px;

需要注意的是,这四个数值的书写顺序,不同于“margin”和“paddding”上、右、下、左。border-radius采用的是左上角、右上角、右下角、左下角的顺序。

border-radius同样可以省略部分值,省略时同样是采用对角线相等的原则。





ICP许可证号:豫ICP备16033425号-1   无语飘雪 wypxcm@sina.cn
Copyright © 2013 - 2018 不正常电脑研究中心   All Rights Reserved   Powered by pcreg.cn