<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

    .test{

        margin:200px auto;

        height:30px;

        border:1px #D4D4D4 solid;

        box-shadow: -1px 10px rgba(,,,0.1);

        background-color:#FAFAFA;

        background-image:-webkit-linear-gradient(top,#FFF,#F2F2F2);

        background-image:-o-linear-gradient(top,#FFF,#F2F2F2);

        background-image:-ms-linear-gradient(top,#FFF,#F2F2F2);

        background-image:linear-gradient(top,#FFF,#F2F2F2);

        background-repeat: repeat-x;

    }

</style>

</head>

<body>

<div class="test"></div>

</body>

</html>

css3创建一个上下线性渐变色背景的div的更多相关文章

  1. 如何使用CSS3创建一个漂亮的图标

    演示 下载 今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 ...

  2. 怎样使用纯CSS3创建一个简单的五角星图形

    我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五 ...

  3. 用 CSS3 创建一个漂亮的多种色彩的菜单

    1. [图片] thumb.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" >    <hea ...

  4. visjs使用小记-1.创建一个简单的网络拓扑图

    1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title> ...

  5. [转载]css3的一个控制背景的属性，background-size可以缩放大小啦

    background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的heigh ...

  6. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  7. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...

  8. Ionic-wechat项目边开发边学（一）：环境搭建和创建一个项目

    之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...

  9. 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...

随机推荐

  1. DataTable在内存中的使用

    DataTable表示一个与内存有关的数据表,可以使用工具栏里面的控件拖放来创建和使用,也可以在编写程序过程中根据需要独立创建和使用,最常见的情况是作为DataSet的成员使用,在这种情况下就需要用在 ...

  2. Node.js的高性能封装 Express.js

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用.Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了W ...

  3. java分享第三天（异常）

    异常的处理办法之一 捕获异常(try,catch,finally) 1 try语句指定了一段代码,该段代码就是一次捕获并处理的范围.在执行过程中,当任意一条语句产生异常时,就会跳过该段中后面的代码.代 ...

  4. java设计模式。。。转载

    maowang I am a slow walker,but I never walk backwards! 博客园 首页 新随笔 联系 订阅 管理 随笔 - 125  文章 - 0  评论 - 12 ...

  5. 关于html页面布局

    之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高 当div不设计长宽高而是自动由内部控件”撑“ ...

  6. 状态压缩DP

    K - Necklace Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:327680KB     ...

  7. Web安全学习笔记之一

    浏览器基本策略:同源策略 同源策略规定:不同域的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 同域与不同域:如http://www.text.com与https://www.text.com ...

  8. SSH集成开发框架开发步骤

    1.  环境搭建 a)添加Struts框架的支持 b)添加spring框架的支持(选中5个类库,且Copy类库到WEB-INF/lib目录下) c)在Eclipse 中,DataBase Explor ...

  9. 【iCore3 双核心板_FPGA】实验十五：基于USART的ARM与FPGA通信实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1c1RbE5E iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. JS写的CRC16校验算法

    var CRC = {}; CRC.CRC16 = function (data) { var len = data.length; if (len > 0) { var crc = 0xFFF ...