<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>hi013z左右方向渐变</title>

  <style>

    .gradient {

      height: 200px;

      width: 100px;

      background: -webkit-linear-gradient(left, #FF8C69, #FFE7BA, #FFF8DC); /* Safari 5.1 - 6.0 */

      background: -o-linear-gradient(right, #FF8C69, #FFE7BA, #FFF8DC); /* Opera 11.1 - 12.0 */

      background: -moz-linear-gradient(right, #FF8C69, #FFE7BA, #FFF8DC); /* Firefox 3.6 - 15 */

      background: linear-gradient(to right, #FF8C69, #FFE7BA, #FFF8DC); /* 标准的语法（必须放在最后） */

      height: 2px;

    }

    #body {

      background: black;

    }

  </style>

</head>

<body id="body">

<div class="gradient"></div>

</body>

</html>

js样式之渐变线的更多相关文章

  1. 搜索框js样式（通用型）

    HTML部分代码: -------------------------------------------------------------- <div class="search_ ...

  2. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  3. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  4. CSS渐变中是如何定义渐变线的

    在CSS语法中用户代理对渐变gradient语法的解析渲染离不开渐变线.渐变分为线性渐变(linear gradient)和径向渐变(radial gradient). 渐变在元素盒模型中backgr ...

  5. 10.Vue.js 样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...

  6. CSS和Js样式属性的对照关系

    注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...

  7. 第十八课：js样式操作需要注意的问题

    样式分为,外部样式(<link />),内部样式(<style></style>),行内样式(style:).再加上一个important对选择器权重的干扰. 大体 ...

  8. React.js 样式组件：React Style

    点这里 React Style 是 React.js 可维护的样式组件.使用 React Native StyleSheet.create一样的样式. 完全使用 JavaScript 定义样式: ? ...

  9. JS 样式操作学习总结。

    在我们编写网页的时候,样式表示我们常常需要相伴的内容,谁然很招人烦.恕我前端菜鸟对这东西很是无力啊.下面是我在代码浪潮中的虚席到的一些东西. 1.样式表内容修改方式. 2.当前元素样式内容获取. 3. ...

随机推荐

  1. git刚初始化项目的操作

    # Command line instructions ## Git global setup git config --global user.name "iback" git ...

  2. VS2015和SVN合作

    SVN就是版本控制管理工具. 插件这里,还是遇到了一些问题,我知道有插件了,但是忽略了开始的版本问题,按时插件安装过程中没有出现意外,故以为“插件安装成功”,岂不知此“成功”非彼“成功”.由于我用的是 ...

  3. 三重DEC加密在java中的实现

    代码可以直接拷走使用,一些约定例如向量可以自行变动 引言      如今手机app五彩缤纷,确保手机用户的数据安全是开发人员必须掌握的技巧,下面通过实例介绍DES在android.ios.java平台 ...

  4. 使用Vivado的block design

    使用Vivado的block design (1)调用ZYNQ7 Processing System (2)配置ZYNQ7系统 (3)外设端口配置 根据开发板原理图MIO48和MIO49配置成了串口通 ...

  5. SDI视频采集过程

    SDI视频采集过程 GTP收发模块为视频采集系统的核心部分,包含发送和接收,完成对信号的解串和串码.并且HD-SDI信号中并非所有的信号都是有效视频信号,这部分功能由数据分析模块实现,并将提取出来的有 ...

  6. nvm环境配置

    安装nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm insta ...

  7. 黄聪：HBuilder左侧项目管理器如何不与标签页一起自动切换

    把这个按钮取消就好了

  8. ALGO-10_蓝桥杯_算法训练_集合运算(排序)

    问题描述 给出两个整数集合A.B,求出他们的交集.并集以及B在A中的余集. 输入格式 第一行为一个整数n,表示集合A中的元素个数. 第二行有n个互不相同的用空格隔开的整数,表示集合A中的元素. 第三行 ...

  9. What is SolrCloud? (And how does it compare to master-slave?)

    What is SolrCloud? (And how does it compare to master-slave?) SolrCloud is a set of new features and ...

  10. MIME Types - Complete List

    Suffixes applicable Media type and subtype(s) .3dm x-world/x-3dmf .3dmf x-world/x-3dmf .a applicatio ...