border-radius属性详解
来源:互联网 发布:批量修图软件知乎 编辑:程序博客网 时间:2024/06/05 06:59
这个borde-radius
属性其实也是一个简写值,它分别是 border-top-left-radius(左上圆角半径), border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),如下图所示:
说到半径,我突然想起来了以前数学中学过关于圆跟半径的关系,百科如下:
在圆中,连接圆心和圆上任意一点的线段叫做圆的半径。通常用字母r来表示。
在球中,连接球心和球面上任意一点的线段叫做球的半径。
正多边形所在的外接圆的半径叫做圆内接正多边形的半径。
css中的radius多少也跟圆扯上关系,不过要分椭圆还是圆,因为css中分了垂直半径和水平半径。而几何中的圆只要确定了半径就可以画出一个圆出来。css中圆角,当使用一个值时,确定为圆角;当使用两个值时,确定一个椭圆圆角,但是不管是圆角还是椭圆角其实都有点像是背景和设置这个圆角半径的重叠产生的,浏览器会去除他们的没有交集的部分,留下有交集的部分,像CDR里面两个有交集的图形使用的相交。
可能一开始很难了解,不妨往下看吧。
说完了大概的东东,那么问题来了,圆角边框具体值有哪些,莫急少年,上w3c找码去。
对于border-radius,w3c的解释在右侧:
border-*-radius
w3c属性值详解:
[ <length> | <percentage> ]:必须出现一个值,可长度可百分比,比如:border-top-left-radius:5px
,border-top-left-radius:5px 50%
都是可行
{1,2}: 表示他们的值最小可以重复一次,最大可重复两次。假如只有一个值,表示圆角,那么它的水平距离和垂直距离相等,即第二个值复制第一个值;假如是两个值,那么确定一个椭圆角,第一个值椭圆的水平半径,第二值为椭圆的垂直半径,说起来有点拗口,直接上图:
只有1个值,如:border-top-left-radius:50px
,表示半径为50px圆,如图:
标注错误了,盒子尺寸为:300*100
假如有两个值,如:border-top-left-radius:50px 100px
,表示水平半径为50px,垂直半径为100px的椭圆,如图:
同理 border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),也是如此。你只要记住当某个角为一个值时,确定是一个圆,当使用两个值确定一个椭圆。
你可以轻戳右侧的demo:左上角为圆角和椭圆角demo
- border-radius属性详解
- border-radius属性详解
- css3属性border-radius详解
- CSS3的border-radius属性详解
- CSS3圆角border-radius属性详解
- CSS3属性border-radius参数详解
- border-radius属性值参数详解
- border-radius属性值参数详解
- border-radius属性值参数详解
- CSS3属性border-radius参数详解
- CSS3 border-radius 属性
- CSS3 border-radius 属性
- CSS3 border-radius属性
- CSS3 border-radius属性
- border-radius属性
- CSS3详解:border-radius
- border-radius参数详解
- css3 border-radius详解
- Android回调的实现
- POJ1062 昂贵的聘礼 dij
- linux下c/c++实例之一万年历
- UILabel 和UIButton的简单实用
- php中时间使用总结
- border-radius属性详解
- K近邻法(KNN)学习笔记(used by python & matlab)
- C++ STL算法系列2---find ,find_first_of , find_if , adjacent_find的使用
- 深入分析 Java I/O 的工作机制--转载
- Android异步加载数据或图片问题
- matlab conv2、filter2、imfilter的区别
- 建立多人协作git仓库/git 仓库权限控制(SSH)
- Android生成签名包以及空白包打签名包
- mac机下切换不同版本的jdk