/*从元素顶部有条阴影，两种方式，第二种更好，能控制阴影的宽度*/
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 Docker的部署

    1.安装 $ yum -y install docker 2.启动docker服务 $ systemctl start docker 3.设置开启自启 $ systemctl enable docke ...

  2. Maps JavaScript API的JavaScript代码

    要请求多个库,请用逗号分隔它们   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& ...

  3. Springboot + Atomikos + Druid + Mysql 实现JTA分布式事务

    DataSource 配置 package com.cheng.dynamic.config; import java.util.Properties; import javax.sql.DataSo ...

  4. Windows下切分文件（GnuWin32）

    windows下碰到查看大日志文件还真麻烦,今天找了个工具来做这个:安装GnuWin32,然后用里面的split命令分割日志文件 ps:发现intellij idea还挺好,超过2g的日志文件也能进行 ...

  5. Java NIO技术总结

    一.背景 大家都知道Java BIO,其全称是java blocking IO,相对的Java NIO 全称为java non-blocking IO.顾名思义,java nio 是一种非阻塞IO.N ...

  6. 获取url参数值（可解码中文值）

    /** * 根据指定参数名称获取参数值 * @param {String} urlStr 参数名称 * @return {Object} 参数值 * */ getUrlParams = functio ...

  7. Springboot文件上传与下载

    一.创建简单的springboot-web项目 二.文件上传属性配置 #默认支持文件上传 spring.http.multipart.enabled =true spring.http.multipa ...

  8. Linux-网络管理

    网络管理 一 基本网络配置 linux操作系统,以太网卡用“eth”表示网卡:序号从零开始eth0代表到系统能够识别的第一个网卡eth1....第2个网卡 查看网卡信息 查看网卡信息 查看当前系统所连 ...

  9. Sublime Text 3 安装简记

    1.下载:( Sublime Text Version 3.1.1 Build 3176 ) https://www.sublimetext.com/3 2.安装Package Control: &q ...

  10. MySQL 主从复制实战解析

    前言:前面几篇文章讲解了在应用层读写分离的配置和使用,这篇文章将来个主从复制的实战解析. 说明:主从复制,读写分离结构图 原理图 主库生成一个线程: Binlog Dump线程 1.此线程运行在主库, ...