/*从元素顶部有条阴影，两种方式，第二种更好，能控制阴影的宽度*/
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. Linux：Day20(上) openssh和CA

    ssh:secure shell protocol,22/tcp,安全的远程登陆 OpenSSH:ssh协议的开源实现: dripbear:另一个开源实现: SSH协议版本 v1:基于CRC-32做M ...

  2. RobotFramework和Eclipse集成-安装和使用说明

    1.安装python3. 安装说明: https://www.cnblogs.com/Simple-Small/p/9179061.html 2.RF安装命令:Pip install RobotFra ...

  3. oracle 关于对时间操作的汇总

    -- 对时间的操作 对当前日期增加一个小时: SQL> select sysdate, sysdate+numtodsinterval(1,’hour’) from dual ; 对当前日期增加 ...

  4. Dora.Interception，为.NET Core度身打造的AOP框架 [1]：更加简练的编程体验

    很久之前开发了一个名为Dora.Interception的开源AOP框架(github地址:https://github.com/jiangjinnan/Dora,如果你觉得这个这框架还有那么一点价值 ...

  5. arale-cookie 使用

    https://www.npmjs.com/package/arale-cookie  arale-cookie 使用 define(function() { var Cookie = require ...

  6. spring boot Websocket（使用笔记）

    ​ 使用websocket有两种方式:1是使用sockjs,2是使用h5的标准.使用Html5标准自然更方便简单,所以记录的是配合h5的使用方法. 1.pom ​ 核心是@ServerEndpoint ...

  7. Spring自动注入之@Autowired、@Resource、@Inject

    相同点: 三者都支持对spring bean的自动注入 不同点: ①Autowired按照类型进行注入( Bean bean = applicationContext.getBean(Bean.cla ...

  8. luogu P1602 Sramoc问题

    嗯...这篇题解写的原因是一位大佬网友问我的题 本蒟蒻为了纪念下这一刻,就写了 我只会写一写基本思路,经不起推敲 还是大家凑活看吧 重点来了 在bfs时,队列里的每个元素由一个高精度的数和那个数模m的 ...

  9. 【LUOGU???】WD与数列 sam 启发式合并

    题目大意 给你一个字符串,求有多少对不相交且相同的子串. 位置不同算多对. \(n\leq 300000\) 题解 先把后缀树建出来. DFS 整棵树,维护当前子树的 right 集合. 合并两个集合 ...

  10. <TCP/IP原理> (一)

    1.协议和标准 2.标准化组织 3.Internet标准:RFC 4.Internet的管理机构 一.协议和标准 1.协议(Protocol) 一组控制数据通信的规则 三要素:语法(syntax).语 ...