/*从元素顶部有条阴影，两种方式，第二种更好，能控制阴影的宽度*/
background-image: linear-gradient(0deg, rgba(226, 226, 226, 0) 97%, rgba(0, 0, 0, 0.04) 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0px, rgba(226, 226, 226, 0) 12px);
用角度值指定渐变的方向（或角度）。
设置渐变为从右到左。相当于: 270deg
设置渐变从左到右。相当于: 90deg
设置渐变从下到上。相当于: 0deg
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

背景上实现阴影——linear-gradient的更多相关文章

  1. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  2. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  3. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  4. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  5. CSS实现背景透明而背景上的文字图片不透明

    1.用图片则能兼容IE8和IE7 2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长,只能设置一个固定高度 3.用颜色则颜色层不能包含内容层(图片和文字) <!-- wrap最外 ...

  6. css实现背景模糊，但不影响背景上的内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 在XIB 或者 SB 上面 实现 半透明的背景上添加UILabel是文字不透明

    设透明背景的时候直接设置RGB值  然后设置Opacity即可

  8. [Canvas]用透明PNG图在背景上画前景能不遮挡背景

    欲看动态效果请点击下载并用Chrome/Firefox浏览器打开index,html. 图例: 从效果可以明显的看到,五角星边缘和中心都没有对背景遮挡. 代码: <!DOCTYPE html&g ...

  9. [MFC]SDI在图片背景上实现文本跟随鼠标移动

    SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...

随机推荐

  1. Storm入门（五）Twitter Storm如何保证消息不丢失

    转自:http://xumingming.sinaapp.com/127/twitter-storm如何保证消息不丢失/ storm保证从spout发出的每个tuple都会被完全处理.这篇文章介绍st ...

  2. 机器翻译评价指标 — BLEU算法

    1,概述 机器翻译中常用的自动评价指标是 $BLEU$ 算法,除了在机器翻译中的应用,在其他的 $seq2seq$ 任务中也会使用,例如对话系统. 2 $BLEU$算法详解 假定人工给出的译文为$re ...

  3. Ubuntu server 16.04的安装 以及配置(服务器版）

    1.在电脑上下载最新版本的Ubuntu服务器ISO映像,刻录到CD或创建一个可启动的USB盘. 2.视情况而定,进入到服务器的boot界面,把cd或者usb设置为启动第一项 3.开始安装   1)Ub ...

  4. poium测试库介绍

    poium测试库前身为selenium-page-objects测试库,我在以前的文章中也有介绍过:这可能是最简单的Page Object库,项目的核心是基于Page Objects实现元素定位的封装 ...

  5. Selenium WebDriver原理（一）：Selenium WebDriver 是怎么工作的？

    首先我们来看一个经典的例子: 搭出租车 在出租车驾驶中,通常有3个角色: 乘客 : 他告诉出租车司机他想去哪里以及如何到达那里 对出租车司机说: 1.去阳光棕榈园东门 2.从这里转左 3.然后直行 2 ...

  6. LVS调度算法

    LVS-四层调度 1.轮询算法:Round Robin - RR 后端RS性能一致,请求开销差别小 2.加权轮询:Weighted Round Robin - WRR 后端RS性能有差异,请求开销差异 ...

  7. Java的properties文件读取和属性修改

    package Test; import java.io.BufferedInputStream;import java.io.FileInputStream;import java.io.FileO ...

  8. 财务CLOUD成本核算

    1.关账  仓库账关账 2.应收应付是否已审核 生成财务应收应付 3.存货账关账 4.1采购存货核算 4.2零成本维护 4.3成本中心设置 4.4成本项目设置 4.5费用项目设置 4.6成本项目匹配方 ...

  9. 网络视频会议openmeetings Windows安装

    官网 http://openmeetings.apache.org/index.html 下载文件解压运行install-service脚本之后运行red5脚本启动 官方安装文档 http://ope ...

  10. Cordova Upload Images using File Transfer Plugin and .Net core WebAPI

    In this article, I am going to explain ,"How to Upload Images to the server using Cordova File ...