/*从元素顶部有条阴影，两种方式，第二种更好，能控制阴影的宽度*/
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. 【推荐】Pencil原型设计工具

    官网:http://pencil.evolus.vn/ 试用了一下,确实感觉很好用,整体体验上是一种“舒畅”的感觉,真心点赞推荐.整体功能上没有任何多余的东西,让人感觉上手就能用.虽然个人英语水平不咋 ...

  2. 小功能 HTML标签状态改变

    在编写程序得时候根据不同的业务需求会改变相应的标签的状态 今天介绍一下<a>标签状态的改变 当前业务场景为需要A标签的样式 即保留A标签的原有样式 在鼠标悬停得时候鼠标状态呈销售状 都知道 ...

  3. Swing 混合布局

    案例一:Border边境边界 package swing; /** * swing 混合布局 */ import java.awt.*; import javax.swing.*; public cl ...

  4. MyEclipse不自动编译问题

    没图,别找了... 我在MyEclipse上从SVN中导项目,导下的项目跑不起来,发现tomcat的classes中是空文件夹. 以下是在网上找的其他方法: 1.确保:Project->buil ...

  5. [Alpha阶段]第十次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第十次Scrum Meeting 基本信息 名称 时间 地点 时长 第十次Scrum Meeting 19/04/15 大运村寝室6楼 35min ...

  6. Linux下网络配置与修改Centos7为列

    一.基础知识 手动绑定: 命令 一般是临时的修改,重启后失效,如:ifconfig.route.ip addr等. 修改配置文件 修改文件配置,永久有效,但是可能不能立即生效,需要重启服务 (serv ...

  7. js 简单弹框toast

    新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...

  8. B树和B+树详解

    一 B树 1.B树的定义:B树(B-tree)是一种树状数据结构,它能够存储数据.对其进行排序并允许以O(log n)的时间复杂度运行进行查找.顺序读取.插入和删除的数据结构.B树,概括来说是一个节点 ...

  9. springboot aop 拦截接口执行时间

    /** * @description: 记录接口执行时间日志的记录 * @author: * @create 2018-12-27 16:32 */ @Target(ElementType.METHO ...

  10. Netty 中 LengthFieldBasedFrameDecoder 构造函数取值备忘

    public LengthFieldBasedFrameDecoder(ByteOrder byteOrder, int maxFrameLength, int lengthFieldOffset, ...