（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. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记：对象的多态性

    class A{ // 定义类A public void fun1(){ // 定义fun1()方法 System.out.println("A --> public void fun ...

  2. 如何让Dev支持c++11特性

    1.点击工具选择编译选项 2.在编译时加入以下命令点击之后再将-std=c++11加入,点击确定就ok了

  3. SwiftUI中多设备运行方法

    https://blog.csdn.net/weixin_42679753/article/details/94465674 https://www.jianshu.com/p/17fc7929fcb ...

  4. Netty 中队列的使用

    任务队列中的Task有3种典型使用场景 用户程序自定义的普通任务 此前代码: 参考https://www.cnblogs.com/ronnieyuan/p/12016712.html NettySer ...

  5. 谈谈函数式编程curry

    Curry概念 The concept is simple: You can call a function with fewer arguments than it expects. It retu ...

  6. 安卓fragment transaction add方法报错

    这个问题百度了很多能用的很少! 原来看的B站的视频教程比较老了参数不匹配!我记一下安卓studio3.1的方法 切换fragment 前都先要 FragmentManager manager=getS ...

  7. Spark的任务提交和执行流程概述

    1.概述 为了更好地理解调度,我们先看一下集群模式的Spark程序运行架构图,如上所示: 2.Spark中的基本概念 1.Application:表示你的程序 2.Driver:表示main函数,创建 ...

  8. vCenter组件和服务

    1).随VMware Platform Services Controller一起安装的服务 a. vCenter Single Sign-On身份验证服务 b. vSphere 许可证服务 c. V ...

  9. BZOJ 3332

    题解:给边赋上权值,然后求最大生成树,如果不符合那就无解 证明:留坑 #include<iostream> #include<cstdio> #include<cstri ...

  10. 新手学Java，有哪些入门知识点？

    很多小伙伴们在刚接触Java的时候,会有些迷茫,不知道该从哪里入手,不管是做前端还是后端,程序员都会用到JAVA,那该掌握哪些必要的基础知识呢.今天就跟大家分享新手学Java,有哪些入门知识点? 下面 ...