（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. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JuJu团队1月8号工作汇报

    JuJu团队1月8号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 飞飞 实现三维Dense 将crossentrophy和softmax连接起来 无 婷婷 完善main.jl ...

  3. python2学习------基础语法2（函数）

    1.函数 # 无参数函数 def loopTest2(): a=1; while a<40: print a; a=a+1; if a==35: continue; else: print 'o ...

  4. JAVA中 PDF文件转成TIFF文件的2种方式

    由于在工作中使用到了PDF->TIFF的技术,所以稍微研究了一下实现方式,通过资料查阅,暂时发现了2种方式,2种方式有所区别:第一种方式转化后的tiff文件是黑白的,第二种方式转化后的tiff文 ...

  5. RVA到FOA的转换

    地址空间:这个地址空间指的是PE文件被加载到内存的空间,是一个虚拟的地址空间,之所以不是物理空间是因为数据在内存中的位置经常在变,这样既可以节约内存开支又可以避开错误的内存位置.这个地址空间的大小为4 ...

  6. 【Winform】ProgressBar

    var progressBar1 = new System.Windows.Forms.ProgressBar(); ; progressBar1.Maximum = ; progressBar1.V ...

  7. bootstrap点击下拉菜单没反应

    出现这个问题一般就涉及 网页脚本的问题 好好看看自己网页 scripts 编写是否正确 也可以通过浏览器的 F12 进入console 控制台看看是什么问题 总的来说 该错误要从网页脚本编写的问题出发 ...

  8. docker中使用mongodb

    连接mongodb容器,下拉alpine应用测试连接

  9. springboot的maven多模块项目架构微服务搭建——依赖方式的多模块演化为微服务项目

    在上一篇依赖方式多模块的基础上对项目进行改造.主要改造user-service项目,service要配置mapper.mybatis及数据库相关的东西,后面的接口消费方user就不再需要了 注意:以下 ...

  10. Educational Codeforces Round 65 选做

    好久没更博客了,随便水一篇 E. Range Deleting 题意 给你一个长度为 \(n\) 的序列 \(a_1,a_2,\dots a_n\) ,定义 \(f(l,r)\) 为删除 \(l\le ...