<!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. redis 简单整理——客户端管理[十六]

    前言 简单介绍一下客户端管理. 正文 Redis提供了客户端相关API对其状态进行监控和管理,这个一般有很多工具了,看看就好,没有必要去细看.

  2. 重新点亮linux 命令树————二进制安装[十一八]

    前言 简单介绍一下二进制安装 正文 wget https://openresty.org/download/openresty-1.15.8.1.tar.gz tar -zxf openresty-V ...

  3. 重新整理.net core 计1400篇[六] (.net core 一个简易版的依赖注入容器 )

    前言 我们了解到一个依赖注入的形式是: 注入依赖服务:var root = new Cat().Register<IFoo, Foo>(Lifetime.Transient); 获取对应的 ...

  4. jenkins 持续集成和交付——一个java构件小栗子(四)

    前言 介绍一下java 构建的小栗子. 正文 maven 管理 java 是用maven 管理包的,那么我们是要安装maven的. 还是那句话,安装这种东西呢,去官网下载然后自己安装,不要用yum a ...

  5. 多年锤炼，迈向Kata 3.0 ！走进开箱即用的安全容器体验之旅| 龙蜥技术

    简介: 袋鼠与 Kata 将会碰撞出什么样的火花? 文/云原生 SIG(Special Interest Group) 一.Kata 的过去 让我们将时钟拨回 2015 年 5 月,Hyper.sh ...

  6. JDBC 在性能测试中的应用

    简介: 我们能否绕开 http 协议,直接测试数据库的性能?是否觉得从数据库中导出 CSV 文件来构造压测数据很麻烦?怎样在压测结束后做数据清理?能不能通过数据库中的插入(删除)记录对压测请求做断言? ...

  7. Serverless Kubernetes：理想，现实与未来

    简介: 当前 Serverless 容器的行业趋势如何?有哪些应用价值?如果 Kubernetes 天生长在云上,它的架构应该如何设计?Serverless 容器需要哪些基础设施?阿里云容器服务产品负 ...

  8. 淘宝推荐、视频搜索背后的检索技术竟是它！深度揭秘达摩院向量检索引擎Proxima

    简介: 淘宝搜索推荐.视频搜索的背后使用了什么样的检索技术?非结构化数据检索,向量检索,以及多模态检索,它们到底解决了什么问题?今天由阿里巴巴达摩院的科学家从业务问题出发,抽丝剥茧,深度揭秘达摩院内部 ...

  9. 3月2日，阿里云开源 PolarDB 企业级架构将迎来重磅发布

    简介:2022年3月2日,开源 PolarDB 企业级架构将迎来重磅发布!本次发布会将首次公开开源 PolarDB 的总体结构设计和企业级特性,对 PolarDB for PostgreSQL 的存储 ...

  10. 技术干货 | 使用 mPaaS 配置 SM2 国密加密指南

    ​简介:随着移动智能终端的广泛应用,敏感信息极易被监控或盗取,给国家.企事业及个人带来极大政治.经济损失.金融和重要领域的各个企业正在逐步落实并完成国产密码改造工作.为解决客户侧因更换加密算法造成的种 ...