一、圆角边框：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. hadoop源码编译

    为何要自行编译hadoop源码,往往是由于官方提供的hadoop发行版都是基于32位操作系统,在操作hadoop时会发生warn.   准备软件: 1)JDK 2)Hadoop源码 3)Maven 4 ...

  2. python面向对象(上)

    创建类 Python 类使用 class 关键字来创建.简单的类的声明可以是关键字后紧跟类名: class ClassName(bases): 'class documentation string' ...

  3. Windows 端口和任务 查看 相关命令

    netstat -aon|findstr " //查看端口 tasklist|findstr " //根据PID找到对应的程序 taskkill /f /t /im netbox. ...

  4. section 模块页面切换代码

    <div class="blockcode"><blockquote><!DOCTYPE html><html><head&g ...

  5. listview滚动到底部

    方法一: // msgListView是ListView控件 // adapter是ListView绑定的Adapter,如果不方便直接使用,也可以通过ListView的getAdapter()方法获 ...

  6. mac osx 10.9 ftp server端口

    开启 FTP Serversudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist 关闭 FTP Serversudo -s ...

  7. 一段phpcurl代码

    $header[] = 'Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-fl ...

  8. Chapter 11. Frame, MainWindow, and Toplevel Widgets 框架,主窗体,顶级部件

    Chapter 11. Frame, MainWindow, and Toplevel Widgets   框架,主窗体,顶级部件 框架和Toplevels 都是设计用于其他部件的容器. 它们的不同在 ...

  9. PHP单例模式编写

    今天来点基础的设计模式: 如何利用单例模式实现一个数据库中间层 class Db{ static private $_instance; //当前数据库连接实例 static public funct ...

  10. java 获取特定天数的时间戳

    public Timestamp strToDate(int type){ Timestamp time = null; DateFormat format2= new SimpleDateForma ...