在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. Scrapy学习篇（三）之创建项目和Scrapy的安装

    安装Scrapy 了解了Scrapy的框架和部分命令行之后,创建项目,开始使用之前,当然是安装Scrapy框架了. 关于Scrapy框架的安装,请参考:https://cuiqingcai.com/5 ...

  2. [UE4]Get Parent，widget获得父容器实例对象

  3. Processing Binary Protocols with Client-Side JavaScript

    http://blog.mgechev.com/2015/02/06/parsing-binary-protocol-data-javascript-typedarrays-blobs/ https: ...

  4. Delphi StringGrid控件的用法

    Delphi StringGrid控件 组件名称:StringGrid         ●固定行及固定列:  StringGrid.FixedCols:=固定行之数;  StringGrid.Fixe ...

  5. ECharts动态加载堆叠柱状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  6. gulp安装，淘宝镜像

    命令:express -e ./ express表示安装express -e表示使用ejs作为模板 ./表示当前目录中 (使用上面的命令之前我们应该使用npm安装express框架 sudo npm ...

  7. ES6中新增字符串方法，字符串模板

    多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123'; if(str.startsWith( ...

  8. PHP的几种缓存方式

    1.文件缓存: 2.Memcached;  是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  9. VIM常用的基本操作

    :wq   退出并保存 :q!  退出不保存 :set number  设置行号 查找: 按‘/’,然后输入要查找的字符,Enter.?和/的区别是,一个向前(下)找,一个向后(上).另外,‘*’可以 ...

  10. django+uwsgi+nginx+sqlite3部署＋screen

    note:可通过该命令查找文件未知 sudo find / -name filename 一:项目(github) ssh root@server ip         #  连接你的服务器 git ...