一、圆角边框：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. javascript this关键字

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. relativelayout常用属性

    ===================================================================================== 整理于http://naot ...

  3. asp.net实现伪静态遇到的问题

    之前在一次项目(asp.net网站)中要用到伪静态技术,实现的思路大致是这样的: 在全局配置文件Global.asax(普通的类可以通过实现IHttpModule来完成)中的Application_B ...

  4. HTML5 drawImage 使用问题

    使用Image遇到的问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Sublime Text2 快捷键设置

    设置Tab两个空格: 点击 Preference -> Settings-User "tab_size":2, "translate_tabs_to_spaces& ...

  6. PHP_CURL请求教程, 内含简单粗暴curl

    //curl访问 //需要url或者data //返回的数组是JSON数据形式 function ppd_curl($url,$data = null){ //\Think\Log::record($ ...

  7. Android系统信息

    前提:获取的都是AndroidMainfest.xml下的信息 一.PackageManager 负责管理所有已安装的App 二.ActivityInfo 封装了Mainifest中的<acti ...

  8. 安全HTTPS-全面详解对称加密，非对称加密，数字签名，数字证书和HTTPS【下】

    1.  HTTPS 1.1. 什么是HTTPS HTTPS(HypertextTransfer Protocol Secure)即安全的HTTP.HTTPS的安全基础是安全套接层(Secure Soc ...

  9. SD卡在单片机上的应用

    (1)SD卡的引脚定义:  SD卡SPI模式下与单片机的连接图: 注意:SPI模式时,这些信号需要在主机端用10~100K欧的电阻上拉.      SD卡支持两种总线方式:SD方式与SPI方式.    ...

  10. [置顶] mkdir函数-linux

    tyle="margin:20px 0px 0px; font-size:14px; line-height:26px; font-family:Arial">