在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. int, bool, string的操作

    基本数据类型 1.int型 可以求整数的二进制长度.输入一个数字a,"a.bit_length()"语法求a的二进制长度. a = 3 #二进制为11 print(a.bit_le ...

  2. [UE4]根据名字调用函数（蓝图）

    一.Set Timer by Function Name 二.Set Timer by Event

  3. Postman模拟ajax请求 并模拟登陆

    2.设置header头 <span style="font-size:16px;">设置代理.cookie.X-Requested-With   注意 :X-Reque ...

  4. Linux下安装与卸载anaconda

    安装:到安装文件夹的目录下输入 bash Anaconda3-4.1.1-Linux-x86_64.sh 卸载:输入

  5. VS2012常用快捷键！

    Shift+Alt+Enter: 切换全屏编辑Ctrl+B,T / Ctrl+K,K: 切换书签开关Ctrl+B,N / Ctrl+K,N: 移动到下一书签Ctrl+B,P: 移动到上一书签Ctrl+ ...

  6. ubuntu 16.04 启用root用户方法，SSH允许root登陆

    1.使用:sudo passwd root设置root的密码,如下图所示: 2.使用su root来测试是否可以进入root用户,如果出现#说明已经设置root用户的密码成功,如下图所示: 3.进入到 ...

  7. vue 整合element-ui

    本文主要介绍如何在vue框架中结合elementUI. 本文主要参考: http://element-cn.eleme.io/#/zh-CN/component/quickstart   1.阅读本文 ...

  8. ubuntu播放音频没声音

    1. 安装pavucontrol sudo apt install pavucontrol 2.配置pavucontrol 在终端执行pavucontrol,弹出设置框进行如下设置:

  9. Java并发编程中的相关注解

    引自:http://www.cnblogs.com/phoebus0501/archive/2011/02/21/1960077.html Java并发编程中,用到了一些专门为并发编程准备的 Anno ...

  10. python-对象方法、静态方法、类方法

    #-*- coding:utf-8 -*- #本次学习:对象方法.静态方法.类方法 class SeniorTestingEngineer: #属性--只能对象来调用self.salary work_ ...