<!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. 【中秋国庆不断更】XML在HarmonyOS中的生成，解析与转换（下）

    一.XML解析 对于以XML作为载体传递的数据,实际使用中需要对相关的节点进行解析,一般包括解析XML标签和标签值.解析XML属性和属性值.解析XML事件类型和元素深度三类场景. XML模块提供Xml ...

  2. 【直播回顾】Hello HarmonyOS进阶课程第五课——原子化服务

    由HDE李洋老师主讲的Hello HarmonyOS进阶系列应用篇第五课<原子化服务>, 已于6月1日晚上 19 点在HarmonyOS社群内成功举行.本节课李洋老师带领大家了解Harmo ...

  3. Linux之识别HBA的WWN

    一.概念 FC HBA,也即Fibre Channel Host Bus Adapter,光纤通道主机适配器,简称光纤适配器. 在FC网络环境中,主机需要和FC网络.FC存储设备(SAN磁盘阵列)连接 ...

  4. mysql 必知必会整理—数据库的维护[十八]

    前言 简单介绍一下数据库的维护. 正文 像所有数据一样,MySQL的数据也必须经常备份. 由于MySQL数据库是基于磁盘的文件,普通的备份系统和例程就能备份MySQL的数据. 但是,由于这些文件总是处 ...

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

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

  6. 【转】Java程序员常用工具类库 - 目录

    原文地址:http://rensanning.iteye.com/blog/1553076 有人说当你开始学习Java的时候,你就走上了一条不归路,在Java世界里,包罗万象,从J2SE,J2ME,J ...

  7. Java面试题：请谈谈对ThreadLocal的理解？

    ThreadLocal是一种特殊的变量存储机制,它提供了一种方式,可以在每个线程中保存数据,而不会受到其他线程的影响.这种机制在多线程编程中非常有用,因为它允许每个线程拥有自己的数据副本,从而避免了数 ...

  8. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-38-如何截图-下篇

    1.简介 这个系列的文章也讲解和分享了差不多三分之一吧,突然有小伙伴或者童鞋们问道playwright有没有截图的方法.答案当然是:肯定有的.宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享. ...

  9. HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

    介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧. 效果图预览 使用说明 点击"Start Download"按钮后,Native侧启动子线程模拟 ...

  10. 有赞 Flink 实时任务资源优化探索与实践

    简介: 目前有赞实时计算平台对于 Flink 任务资源优化探索已经走出第一步. 随着 Flink K8s 化以及实时集群迁移完成,有赞越来越多的 Flink 实时任务运行在 K8s 集群上,Flink ...