一、圆角边框：IE9.0以前版本不支持
 
border-radius: 接受8个属性，前四个为x轴，后四个为y轴，以斜杠划分x轴、y轴，即border-radius:左上较 右上角 右下角 左下角 / 左上角  右上角  右下 角  左下角  ;（x轴/y轴 ），如：border-radius: 100px 0 100px 0/100px 0 100px 0。
 
顺序图：
 
 
原理图：
 
 
 
原理：
     以四个角a，b，c，d 为起点，横向为x轴，纵向为y轴，以左上角x轴100px，y轴100px两点之间为弧，四个角交点为圆心的的四分之一圆，同样右下角也是，即border-radius: 100px 0 100px 0/100px 0 100px 0。
 
效果一：
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 200px;

 height: 200px;

 background-color: red;

 border-radius: 100px 0 100px 0/100px 0 100px 0;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
 
效果二：
原理：
    左下角x轴50px,y轴50px;border-radius: 0 0 0 50px/0 0 0 50px;
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 200px;

 height: 200px;

 background-color: red;

 border-radius: 0 0 0 50px/0 0 0 50px;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
 
效果三：
原理：
     div宽度200px,高度100px,四个角x轴100px,y轴50px,即border-radius: 100px/50px;
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 200px;

 height: 100px;

 background-color: red;

 border-radius: 100px/50px;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
效果四：
原理：
     以100px为半径：border-radius: 100px，给圆添加100px的border：border:100px solid #ccc，再把要空缺的部分颜色变透明：border-right: 100px solid transparent。
 
代码:
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 0px;

 border-radius: 100px;

 border:100px solid #ccc;

 border-right: 100px solid transparent;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
 
 
二、图像边框：IE9.0及以下均不支持
border-image:url()  该属性用于指定边框宽度（上 右 下 左  ） 背景图的填充方式（[ stretch | repeat | round ]默认值：stretch ）
）
stretch： 指定用拉伸方式来填充边框背景图。
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
 
如：border-image: url(1.png) 49% repeat;    border-image: url(1.png) 125 202 166 166 round;
 
例子：
使用的背景图：
 
 
 
效果一：
原理：
 
     上下左右各以166px的距离分割成九块，a，b，c，d四块分别为div的四个角，且每个角的背景图大小会自适应为border的大小，然后两个角之间的背景图根据div的boder除去四个角的大小进行拉伸。
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 div{

 height: 300px;

 width: 300px;

 border-width: 50px;

 border-image: url(1.png) 166 round;

 background: #ccc;

 }

 </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>
 
效果二：
 原理：
      对背景图上下左右进行100%的切割，即div四个角为整张背景图，由于切割超过50%，两个角之间的背景图没有重合部分，所以border-image无法进行拉伸。
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 div{

 height: 300px;

 width: 300px;

 border-width: 50px;

 border-image: url(1.png) 100% round;

 background: #ccc;

 }

 </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

关于css3的边框的border-radius和border-image用法的详解的更多相关文章

  1. CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...

  2. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  3. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  4. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  5. CSS3 - 新单位vw、vh、vmin、vmax使用详解

    参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html

  6. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  9. 第93天：CSS3 中边框详解

    CSS3 边框详解 其中边框圆角.边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握. 一.边框圆角  border-radius    每个角可以设置两个值 ...

随机推荐

  1. 手把手教你使用Git(转)

    Git使用教程 2014-10-25 14:29 by 云溪0707, 10532 阅读, ... 评论, 收藏, 编辑 Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系 ...

  2. hadoop压缩配置

    为何要使用压缩,压缩可以是文件的大小减小很多,节省空间:另外压缩后的文件在传输时更节省带宽. 所需软件: 1)lzo 2)hadoop-lzo 3)maven 安装编译: 1)lzo wget htt ...

  3. core-site.xml配置项：hadoop.tmp.dir

    hadoop.tmp.dir:A base for other temporary directories. 集群运行后,修改该配置项后,发现类似错误: -- ::, INFO org.apache. ...

  4. HDU 5724 - Chess

    题意:    一个n行20列的棋盘. 每一行有若干个棋子.     两人轮流操作, 每人每次可以将一个棋子向右移动一个位置, 如果它右边有一个棋子, 就跳过这个棋子, 如果有若干个棋子, 就将这若干个 ...

  5. CodeForces 698A - Vacations (Codeforces Round #363 (Div. 2))

    要么去体育馆,要么去比赛,要么闲在家里 给出每一天体育馆和比赛的有无情况,要求连续两天不能去同一个地方 问最少闲几天 DP方程很容易看出 dp(第i天能去的地方) = min(dp(第i-1天的三种情 ...

  6. HTML 5 学习 （1）

    一.HTML的发展 20世纪70年代~80年代之间HTML正式诞生,但是没有一个统一的标准,显示内容比较单一.在netscape上显示的网页可能在ie5中无法正常显示,反之亦然. 1998年,HTML ...

  7. JAVA编程思想——类型信息(反射)

    一.反射与RTTI RTTI:这个类型必须在编译的时候已知或者存在,如果不知道对象的确切类型,RTTI可以告诉你. 反射(个人认为就是能够利用Class获取或者调用.class这个文件中的数据):当我 ...

  8. 一步一步学python(六) - 抽象

    1.string转数字 import  locale locale . atoi( str ) 2.创建函数 函数是可以调用(可能包含参数),执行某种行为并返回一个值 >>>impo ...

  9. Inno Setup：获取isl中的多国语言字串

    原文 http://zwkufo.blog.163.com/blog/static/25882512010101041626803/?suggestedreading&wumii 用InnoS ...

  10. 【C++第二课】---C到C++的函数升级

    C++中对C语言在函数使用方面做了很大的升级 一﹑内联函数 1.C++中推荐使用内联函数来替代宏片段代码 2.C++中使用关键字inline声明内联函数 例如: inline int func(int ...