（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数据库编程：ResultSet接口

    import java.sql.Connection ; import java.sql.DriverManager ; import java.sql.SQLException ; import j ...

  2. uni-app小程序滑动事件

    <view class="relative" @touchmove="handletouchmove" @touchstart="handlet ...

  3. 题目：给定一数组 例如：a = [1,2,3,5,2,1] 现用户提供一个数字 请返回用户所提供的数字的所有下标

    def test(ary): ds = {} for i in range(len(ary)): if ds.get(ary[i]): ds[ary[i]].append(i) else: ds[ar ...

  4. Linux基础命令之——边边角角

    linux基础指令的内容较多,总共一百多条,包含一些服务120条左右(误差不超过一个亿),选项也五花八门,但是有些较为实用的命令或者选项在使用的过程中又会一时想不起来,降低了工作效率. 因此,专门做一 ...

  5. solus linux 中文输入法

    默认用ibus输入框架,安装ibus-libpinyin sudo eopkg install ibus-libpinyin ibus 安装好后重启 在系统设置 -区域和语言中添加中文,(记得自己设置 ...

  6. Git内部原理探索

    目录 前言 Git分区 .git版本库里的文件/目录是干什么的 Git是如何存储文件信息的 当我们执行git add.git commit时,Git背后做了什么 Git分支的本质是什么 HEAD引用 ...

  7. DirectX9完全面向对象框架

    #pragma once #define UNICODE //Direct3D lib #include<d3d9.h> #include<d3dx9.h> #pragma c ...

  8. 三十二、CI框架之配置域名和设置默认登陆网站

    一.打开routes.php文件,将$route['default_controller'] = 'login'; 修改成我们需要的内容. 二.修改config.php中的base_url数据 三.L ...

  9. chrome警告：Synchronous XMLHttpRequest on the main thread

    警告 原因 ajax同步请求会触发此警告 分析 这段英文翻译:主线程上的同步XMLHttpRequest不受欢迎,因为它对最终用户的体验有害: ajax同步,在向后台请求的过程中,前台代码执行会停留在 ...

  10. 0104 gradle入门

    背景 gradle的官网是 www.gradle.org,标题介绍是: accelerate developer productivity,翻译过来:提高开发者的生产率: 简要介绍:从手机app到微服 ...