一、圆角边框：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. MVC布局页占位符@RenderSection("bscript", false)

    @RenderSection("bscript", false) //false表示不是必须填充 填充bscript占位符  @section bscript{}

  2. 关于textField

    如果想给textField设置背景图片,首先设置该控件的bounder Style为最左边的无style,然后设置背景图片   如果设置textField弹出键盘 的发送按钮:设置右侧Return K ...

  3. Thinking In Java读书笔记--对象导论

    Thinking In Java读书笔记--对象导论[对象]服务提供者==>将对象看做一个服务提供者[程序员分类][类创造者]/[客户端程序员] [访问控制存在的原因?][1]客户端程序员无法触 ...

  4. E - The King

    Description Once upon a time in a country far away lived a king and he had a big kingdom. He was a v ...

  5. 网易云数据结构- Maximum Subsequence Sum

    题目 题目地址 思路 显然是最大子列和的进化版,那就先思考下经典的最大子列和.这也是道思维题,啥算法也没用到,全是思维技巧,真心不知道考试遇到这种题该怎么办了. 存放答案的一个类,我把它看成一个袋子, ...

  6. multiprocessing跨平台锁的使用（Windows问题）

    在Windows上可能遇到,开启的子进程不会关闭的问题 参考multiprocessing官方文档: Explicitly pass resources to child processes On U ...

  7. glusterFS的缓存测试

    众所周知,glusterFS在客户端有缓存,缓存目的在于提高读性能.那么多个客户端同时对文件进行读写,会不会存在client缓存与server文件不一致的情况?比如client A和client B读 ...

  8. 仿制的ActivityIndicatorView

    仿制Github上CSS3效果制作的几个简单的ActivityIndicator,复习一下IOS动画操作. 原效果连接:https://github.com/tobiasahlin/SpinKit 代 ...

  9. 【python】bytearray和string之间转换，用在需要处理二进制文件和数据流上

    最近在用python搞串口工具,串口的数据流基本读写都要靠bytearray,而我们从pyqt的串口得到的数据都是string格式,那么我们就必须考虑到如何对这两种数据进行转换了,才能正确的对数据收发 ...

  10. Oracle EBS-SQL (INV-9):检查搬运单分配异常.sql

    select h.request_number,         l.line_number,         msib.segment1 item_code,         t.transacti ...