在css 设置样式的时候，有时候会用到将元素的边框设置为圆形的样子的时候，一般都是通常直接设置：{border-radius:5px },这样就行了，但是到底是什么意思，一直以来都没有弄明白，只是知道这样设置可以将边框设置成圆形的样子

其实：border-radius 属性的参数，不仅仅可以写一个参数，也可以写两个参数，三个参数，或者四个参数，另外，还可以写写百分比(这里的百分比，是针对border本身的尺寸来的）

格式：

border-radius:none | length{1,4}[/length{1,4}]

其中，length 也可以使用百分比来表示

1. 当 border-radius 为none 时，表示不进行圆弧式的修边

2. 当 length 有值时，有几种情况

2.1 length有一个值，这时border 的四个角的 border-radius 都是一样的值 ，即 border-top-left ,border-top-right,border-bottom-right,border-bottom-left 四个值都相等

2.2 length 有两个值时，border 对角的 border-radius 相等，第一个值为 border-top-left/border-bottom-right ,第二个值为border-right-top / border-bottom-left

2.3  length 有三个值时，第一个值为 border-top-left,第二个值为border-top-right/border-bottom-left, 第三个值为border-bottom-right

2.4 length 有四个值时，第一个值为 border-top-left,第二个值为border-top-right, 第三个值为border-bottom-right，第四个值为border-bottom-left

顺序：顺时针排序

2.5 此外，还需要做浏览器兼容：如

 -webkit-border-radius: 10px 20px 30px;

 -moz-border-radius: 10px 20px 30px;

 border-radius: 10px 20px 30px;

3.设置一个图片的角落成圆弧型的效果：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         img {

             margin: 100px;

             border-radius: 15px;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="./110.jpg" alt="" width="230" height="160">

     </div>

 </body>

 </html>

运行效果：

设置border-radius 参数为两个时：

  <style>

         img {

             margin: 100px;

             border-radius: 15px 5px;

         }

 </style>

设置border-radius 参数为3个时：

 <style>

         img {

             margin: 100px;

             border-radius: 30px 20px 10px;

         }

 </style>

设置border-radius 参数为4 个是时：

  <style>

         img {

             margin: 100px;

             border-radius: 30px 20px 10px 5px;

         }

 </style>

设置弧形半径为百分比时：

  <style>

         img {

             margin: 100px;

             border-radius: 10% 35%;

         }

 </style>

css3 之border-radius 属性解析的更多相关文章

  1. CAGradientLayer的一些属性解析

    CAGradientLayer的一些属性解析 iOS中Layer的坐标系统: 效果: - (void)viewDidLoad { [super viewDidLoad]; CAGradientLaye ...

  2. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  3. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  4. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  5. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  6. CAGradientLayer的一些属性解析－b

    CAGradientLayer的一些属性解析 iOS中Layer的坐标系统: 效果: - (void)viewDidLoad { [super viewDidLoad]; CAGradientLaye ...

  7. Activity设置全屏显示的两种方式及系统自带theme属性解析

    转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...

  8. PE知识复习之PE的各种头属性解析

    PE知识复习之PE的各种头属性解析 一丶DOS头结构体 typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // M ...

  9. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  10. 【Spring源码深度解析学习系列】复杂标签属性解析（四）

    一.创建用于属性承载的BeanDefinition BeanDefiniton是一个接口,在Spring中存在三种实现:RootBeanDefinition.ChildBeanDefinition.G ...

随机推荐

  1. [UE4]增加观察者

    角色死亡以后,让控制器控制另外一个只能移动,没有实体的Character角色 使用“Possess”函数让控制器控制新生成的观察者对象.如上图所示要使用Delay延迟1秒再生成观察者,是因为死亡的时候 ...

  2. 【PHP】五分钟教你编写一个实时弹幕网站

    由于博主是个忠实的英雄联盟粉丝,所以经常观看一些明星大神的直播.而一谈到直播,肯定会看到满屏幕飘来飘去的弹幕.那么问题来了,这些视频弹幕网站如何做到实时同步的?PHP如何开发一个类似的网站? 首先要搞 ...

  3. CAS锁相关讲解

    感谢GOOGLE强大的搜索,借此挖苦下百度,依靠百度什么都学习不到! 参考文档: http://www.blogjava.net/xylz/archive/2010/07/04/325206.html ...

  4. vue的坑

    1. (vue2.x以上,1.x没有问题)vue和jq一起使用的冲突:在使用了v-bind: class的元素上,当vue和jq都需要增改class时,用jq加的属性可能无效. 原因:当数据的布尔值改 ...

  5. xcode pod install 安装失败，提示缺少文件

    I had the same problem in Xcode 6.1.1. I did the following to solve it: Set the configuration file s ...

  6. 用树莓派开Wifi热点

    安装软件 首先设置软件源: vim /etc/apt/sources.list 查看软件源后面的版本,如果是wheezy,需要换成jessie wheezy是基于deb 7的版本 而现在是基于jess ...

  7. python 实现排序算法(三)-选择排序和冒泡排序

    #/usr/bin/env python #coding:utf-8 #@auther="livermorium" ''' 选择排序 从数据中选择最小值,排在位置首位 再从剩余未排 ...

  8. Qt Opengl

    目前在Qt5中做Opengl的学习时候,发现gluPerspective函数没有定义. 1: gluPerspective( 45.0, (GLfloat)width/(GLfloat)height, ...

  9. Android：真机调试遇到的问题（You need to use a Theme.AppCompat theme (or descendant) with this activity）

    Android:真机调试遇到的问题(You need to use a Theme.AppCompat theme (or descendant) with this activity). 在调试&l ...

  10. CS229 6.5 Neurons Networks Implements of Sparse Autoencoder

    sparse autoencoder的一个实例练习,这个例子所要实现的内容大概如下:从给定的很多张自然图片中截取出大小为8*8的小patches图片共10000张,现在需要用sparse autoen ...