在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. Python pip源处理

    pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...

  2. 学习docker后的个人理解

    一.什么是docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...

  3. Getting Physical With Memory.CPU如何操作内存

    原文标题:Getting Physical With Memory 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精彩文章翻译一下 ...

  4. 利用(CMD)在Django中创建文件

    django项目的创建(在CMD中) 1.切换到你想要存储项目的位置,我这里保存在桌面上 cd Desktop 2.创建一个django项目,项目名叫guest django-admin startp ...

  5. Ajax总结一下

    一.什么是Ajax Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求.通俗的理解的话就是,如果没有Ajax技术,改变网页的一小 ...

  6. python入门-直方图

    使用的是pygal函数库 所以需要先安装 1 安装库文件 pip install pygal=1.7 2 创建骰子类 from random import randint class Die(): # ...

  7. 【转】R语言 RStudio快捷键

    链接地址  http://blog.sina.com.cn/s/blog_403aa80a0101ar8q.html 控制台 功能 Windows & Linux Mac 移动鼠标到控制台 C ...

  8. 《算法》第六章部分程序 part 4

    ▶ 书中第六章部分程序,包括在加上自己补充的代码,利用后缀树查找最长重复子串.查找最大重复子串并输出其上下文(Key word in context,KWIC).求两字符串的最长公共子串 ● 利用后缀 ...

  9. 《算法》第四章部分程序 part 5

    ▶ 书中第四章部分程序,加上自己补充的代码,图的深度优先遍历 ● 无向图的广度优先遍历,有向 / 无向图代码仅若干方法名不同 package package01; import edu.princet ...

  10. windows清除访问共享文件夹的登陆信息

    https://jingyan.baidu.com/article/c843ea0b70797e77931e4a96.html 当在命令提示窗口输入net use命令时,会显示本机缓存的共享登录信息, ...