码迷,mamicode.com
首页 > Web开发 > 详细

css之border-radius

时间:2018-11-09 16:23:37      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:语法   右上角   收缩   lower   pos   去百度   tom   个人   绘制   

 

 

 

 

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

  通常我在使用这个属性的时候,一般都是用在给div或者button加上一点圆角弧度,显得好看一点,或者用来画一个圆形div。用的稍微高级一点的,也就是用来画了一个右半圆来做为侧边栏的展开/收缩按钮,记得当时还是刚刚开始学习前端不久,这个半圆怎么画还是百度来的,并没有深入去研究为什么这么设置就是这样一个形状。

  技术分享图片

  后来对border-radius的使用也是平平淡淡,无非就是加个圆角画个圆。今天写代码的过程中,突然对border-radius值的设置好像加深了一点理解,就多研究尝试了一下,下面整理一下border-radius的使用方法以及我的理解,如果有理解不对的地方,欢迎指正,相互学习。

  一、border-radius使用

  border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有三种写法:

  (1)仅设置一个值

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

技术分享图片
1 #test1 {
2     border: 3px solid red;
3     height: 100px;
4     width: 200px;
5     border-radius: 30px;
6 }
技术分享图片
 

 技术分享图片

 
技术分享图片
1 #test2 {
2    border: 3px solid red;
3   height: 100px;
4   width: 100px;
5   border-radius: 53px;
6 }
技术分享图片
 

 技术分享图片

 

   (2)设置四个方向的值

  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;(ps:与padding和margin一样,各个数字之间用空格隔开)。

  这里要注意四个数值的书写顺序,不同于padding和margin的“上、右、下、左”的顺序,border-radius采用的是左上角、右上角、右下角、左下角的顺序,如下图所示:

技术分享图片  (3)省略部分值

  与padding和margin一样,border-radius同样可以省略部分值,省略时同样是采用对角线相等的原则,例如:

技术分享图片
1 #test3 {
2     border: 3px solid red;
3     height: 100px;
4     width: 200px;
5     border-radius: 50px 0px;
6 }
技术分享图片
 

技术分享图片

 

   二、border-radius数值设置及显示效果的理解

  (1)使用px表示数值的情况

  在使用px来表示圆角值的时候,圆角的弧度一般都是一个圆形的部分弧形,具体呈现的显示效果我是按如下方法与预估和理解的:

  假设一个长200px,高150px的div对象,设置它的border-radius的值为30px,那么实际呈现的圆角,其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度,语言表达的可能不够透彻,看下面的例子应该可以明白。

技术分享图片
 1 #test4 {
 2     height: 150px;
 3     width: 200px;
 4     border-radius: 30px;
 5     background-color: cornflowerblue;
 6 }
 7 #circle {
 8     width: 60px;
 9     height: 60px;
10     border-radius: 30px;
11     background-color: chartreuse;
12 }
技术分享图片
 
技术分享图片
1 <div id="test4">
2     <div id="circle"></div>
3 </div>
技术分享图片
 

技术分享图片

  这么去理解以后,下次再需要绘制圆形、各个方向的半