一、圆角边框：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. SQL随机查询，显示行号，查询数据段

    1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用临时表,但在SQL Se ...

  2. 解决linux top命令提示的unknown terminal type的问题

    [root@localhost bin]# top 'xterm-256color': unknown terminal type. 在网上搜索了解决方法如下: 解决办法: 1.临时办法,下次启动失效 ...

  3. 无法启动计算机"."上的服务w3svc

    在启动IIS服务的时候出现错误: 无法启动计算机"."上的服务w3svc 解决方法: /* 修复错误 运行命令提示符 fsutil resource setautoreset tr ...

  4. shonc项目中的设计资讯模块 php 字符串操作与正则表达式 strip_tags preg_match

    问题:当description 内容要求description的值选用资讯内容的前50个汉字.资讯内容可能有图片. 此时需要对输出的内容进行处理 php 正则表达式处理,编辑器输出的内容 只取图片: ...

  5. python时间函数

    import time print time.time() print time.localtime() fm = '%Y-%m-%d %H:%M:%S' YMD = time.strftime(fm ...

  6. SQL Server中in与exist效率比较

    in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的. 如果查询的两 ...

  7. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  8. MFC 遍历FTP服务器目录中文乱码问题

    在编写FTP客户端的时候我用的是server u来做我的测试服务器,而server u 默认使用utf-8作为默认字符集,vs则使用unicode作为默认字符集,所以会产生乱码,将server u的默 ...

  9. linux之SQL语句简明教程---UNION ALL

    UNION ALL 这个指令的目的也是要将两个 SQL 语句的结果合并在一起. UNION ALL 和UNION 不同之处在于 UNION ALL 会将每一笔符合条件的资料都列出来,无论资料值有无重复 ...

  10. 能上QQ无法打开网页

    能上QQ无法上网电脑故障解决方法 Winsock协议配置故障解决方法 第1步 :单击开始菜单中的运行,并在打开的运行窗口中键入“cmd”并回车确定,打死命令提示符窗口. 第2步 :在打开的命令提示符窗 ...