（1）一个渐变的底边线
border:1px solid transparent;
border-image: -webkit-linear-gradient(right,  #FF9848,#FF2A2B) 1 1;
border-image: -o-linear-gradient(right,  #FF9848,#FF2A2B)  1 1;
border-image: linear-gradient(to right,  #FF9848,#FF2A2B) 1 1;
border-image-slice:0 0 100% 0;//下边框

（2）一个渐变的带图片的边线
  1. border-image-source:url(../img/border_img.png);
  2. border-image-slice:0 0 100% 0;
  3. border-image-width:0.05rem;
  4. border-image-repeat:repeat;
  5. 合起来写

border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;

6、若想此单边框在上方，可只修改

  1. border-image-slice:100% 0 0 0;

css3 实现渐变边框的更多相关文章

  1. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  2. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  3. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  4. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  5. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  6. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  7. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  8. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  9. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

随机推荐

  1. 虚拟机安装安全狗apache服务的一些问题解决方式（11.5）

    首先本文鸣谢bonga的解答大部分问题=.= 由于本人比较懒所以还是喜欢问,不喜欢查啦 1.windows网站安全狗分为:IIS  和  APACHE  版本    我下载的是APACHE版本 (因为 ...

  2. delphi对ZIP解压

    Delphi 对GZIP解压 作者:admin 来源:未知 日期:2010/5/9 13:08:46 人气:获取失败 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 呵呵,终于 ...

  3. Linux-lsxxx

    Linux-lsxxx ls list directory contents 列出文件及目录 lsattr List file attributes on a Linux second extende ...

  4. Linux-hosts

    Linux-hosts hosts文件 /etc/hosts OS hosts (path) 使其生效,命令行执行 Windows (C:\Windows\System32\drivers\etc\h ...

  5. 019、Java中定义字符

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. 001-PHP静态变量

    <?php function ADD1() { static $a = 10; //定义静态变量 $a += 1; echo "静态变量a的值为:" . $a . " ...

  7. php phar反序列化任意执行代码

    2018年 原理一.关于流包装stream wrapper大多数的文件操作允许使用各种URL协议去访问文件路径,如data://,zlib://,php://例如常见的有include('php:// ...

  8. 虚拟机安装centos6.5出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题

    vmware安装linux系统出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题 问题出现原因:我给虚拟机的内存太小了,只给了512M 解决办 ...

  9. windows炸鸡啤酒

    20170831 今天郁闷,一台windwos远处不上去,被怼了,只能说我活该,事先不弄清楚自己负责的服务运行机器的管理员. 今天尤其特别想知道这台windows跑了多久(linux:uptime), ...

  10. Python 中 configparser 配置文件的读写及封装，配置文件存放数据，方便修改

    1. 将程序中不常变化的数据放在配置文件中,有什么好处? 将配置统一放在一起,进行统一管理,方便维护,方便修改 配置文件将存放测试数据比如: Excel文件名. 日志名. 用例执行的结果. 实际结果和 ...