<!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. java-shiro登录验证

    登录验证: LoginController:(LoginController.java) @ResponseBody @RequestMapping(value="/login", ...

  2. C# 虚方法、override和new

    使用new关键字来做调用 using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...

  3. MySQL+MyBatis下批量修改数据的问题

    今天处理数据批量的更新,场景是这样子的,web站管理的字典功能,需要添加一个记录的整体描述,以及详细内容的描述.一个字典整体概述只有一组信息,但是其详细内容,会有很多项,不确定. 这个场景,在关系型数 ...

  4. 总线读写---verilog代码

    总线读写---verilog代码 `timescale 1ns / 1ps ////////////////////////////////////////////////////////////// ...

  5. 利用curl 模拟多线程

    所谓多线程就是多个 程序同时运行,单线程:执行一段逻辑,等待完成后 在执行另外一个. 多线程:几个逻辑同时进行处理,不需要相互等待,提高了总的执行时间 接下来就用curl实现多线程 实现逻辑 1. f ...

  6. Laravel 输出最后一条sql

    $queries = DB::getQueryLog(); $last_query = end($queries); print_r( $last_query);

  7. 关于java中Static关键字的加强理解

    static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...

  8. 黄聪：Pjax 无刷新开发web，更好用户体验

    什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...

  9. 开始使用GoJS

    GoJS是一个用于实现交互式图表的JavaScript库.本页将向您展示使用GoJS的必要条件. 由于GoJS是一个依赖于HTML5功能的JavaScript库,因此您需要确保您的页面声明它是一个HT ...

  10. 阿里云ECS服务器环境搭建——ubuntu16.04图形界面的安装

    阿里云ECS服务器环境搭建——ubuntu16.04图形界面的安装 最近琢磨着想在服务器上搭建一个hexo博客,于是就在阿里云上买了一个云服务器ECS,远程接入后默认给的是一个命令窗口,没有图形界面, ...