<!DOCTYPE html>

<html>

<head>

    <style>

        p.one {

            text-shadow: 3px 5px 5px #FF0000;

        }

        p.two {

            color: white;

            text-shadow: 1px 1px 2px black,

                         0 0 25px blue,

                         0 0 5px darkblue;

        }

    </style>

</head>

<body>

    <p class="one">文本阴影效果</p>

    <p class="two">文本阴影效果</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 100px;

            height: 100px;

            border-radius: 10px;

            background-color: #CCC;

            float: left;

            margin: 5px;

        }

        div.one {

            box-shadow: 2px 2px 5px #000;

        }

        div.two {

            box-shadow: 2px 2px 5px #000 inset;

        }

        div.three {

            margin-left: 10px;

            box-shadow: 0px 0px 0px 3px #bb0a0a,

                        0px 0px 0px 6px #2e56bf,

                        0px 0px 0px 9px #ea982e;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

</body>

</html>

CSS——阴影的更多相关文章

  1. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  4. css阴影--box-shadow的用法

    原文:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边 ...

  5. css阴影框

    选中div浮动的阴影框.example-card:hover {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);transform: translate3d(0, ...

  6. CSS 阴影动画优化技巧一则

    本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文. bo ...

  7. css阴影

    文字阴影:text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]... 区域阴影:box-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]. ...

  8. css阴影，边框，渐变，背景

    一.box-shadow: 参数1,参数2 阴影位置偏移量 参数3 模糊半径 参数4 扩展半径 负数 0 默认值 正数 参数5 阴影的颜色 参数6 设置内阴影 inset 默认是外阴影 多个阴影使用, ...

  9. CSS阴影盒子

    box-shadow:inset 横向偏移量  纵向偏移量  模糊范围  扩展范围  阴影颜色: 1.inset :(可选) 内阴影,不设置inset,表示盒子外部显示一个投影.也可写在最后. 2.横 ...

  10. css 阴影使用

    文本阴影 p{ text-shadow: 5px 5px 5px #FF0000; } text-shadow: h-shadow v-shadow blur color; text-shadow: ...

随机推荐

  1. Docker之离线安装和在线安装

    一.离线安装 1.软件包下载 https://download.docker.com/linux/static/stable/x86_64/ 2.安装docker tar xvf /opt/docke ...

  2. Kotlin 使用协程编写高效的并发程序

    概念: 轻量级的线程 协程允许我们在单线程模式下模拟多线程编程的效果,代码执行时的挂起与恢复完 全是由编程语言来控制的,和操作系统无关.这种特性使得高并发程序的运行效率得到了极大的提升. 依赖库: d ...

  3. LRU缓存及其实现

    缓存是我们日常开发中来提高性能最直接的方式,经常会听到有人说:性能不行?是因为你没加缓存!常见的缓存有外部缓存服务以及程序内部缓存,外部缓存服务包括:Redis.Memcached等,内部缓存就是我们 ...

  4. dojo\dart脚本编程语言

    Dojo是一个用于构建高效.可扩展的Web应用程序的开源JavaScript框架.它提供了一系列功能丰富的模块和组件,包括DOM操作.事件处理.异步编程.动画效果等.Dojo还具有强大的用户界面(UI ...

  5. SQL case when then end

    SQL case when then end sql中的返回值可以使用case when then end来进行实现 SELECT s.s_id, CASE s.s_name WHEN '1' THE ...

  6. 力扣48(java)-旋转图像（中等）

    题目: 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像 ...

  7. 《领域驱动设计》：从领域视角深入仓储（Repository）的设计和实现

    简介: <领域驱动设计>中的Repository(下面将用仓储表示)层实际上是极具有挑战性的,对于它的理解,也十分重要.本文讲大部分内容都在众多前辈理论基础上,从一个崭新的领域视觉开始探索 ...

  8. MySQL 深潜 - MDL 锁的实现与获取机制

    简介:本文将介绍在 MDL 系统中常用的数据结构及含义,然后从实现角度讨论 MDL 的获取机制与死锁检测,最后分享在实践中如何监控 MDL 状态. ​ 作者 | 泊歌 来源 | 阿里技术公众号 一 背 ...

  9. Quick BI产品核心功能大图（五）移动端：让数据在更多业务场景中流通

    ​简介:将数据更好的融入日常工作中,一个重要的前提条件就是多端多渠道的数据触达和办公协同能力. Quick BI凭借移动端交互体验,帮助用户随时随地便捷查看报表,并通过在线协同方式,追踪策略的执行落地 ...

  10. 好代码实践：基于Redis的轻量级分布式均衡消费队列

    简介: 好代码,给人第一个印象的感觉,就像一篇好文章一样,读起来朗朗上口.不同的文章有不同的风格体裁,不同的代码也有不同的编程风格要求.Python有严格的缩进,像诗歌一样工整对仗:C语言面向过程像散 ...