文本阴影介绍

  • 在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。
  • text-shadow属性值说明，在文本阴影实践中：第一个值是设置阴影水平方向移动，第二个值是设置阴影垂直方向移动，第三个值是设置阴影模糊距离，第四个值是设置阴影颜色。
  • text-shadow属性值可以设置为负数。
  • 文本可以设置多个阴影以逗号分隔即可。
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;

文本阴影实践

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>文本阴影</title>

  <style>

    div{

      font-size: 60px;

      color: seagreen;

      text-shadow: 1px 2px 3px red;

    }

  </style>

</head>

<body>

   <div>微笑是最初的信仰，加油。</div>

</body>

</html>

元素阴影介绍

  • 在CSS中使用box-shadow属性设置元素阴影。
  • box-shadow属性值说明如：第一个值是设置阴影水平方向移动，第二个值是设置垂直方向移动，第三个值是设置阴影清晰度，第四个值是设置阴影大小，第五个值是设置阴影颜色，第六个值是设置阴影的位置默认阴影位置在外边，inset设置阴影在内部。
  • box-shadow属性值可以设置为负数。
  • box-shadow属性值可以设置多个阴影，用逗号分隔即可。

元素阴影实践

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>元素阴影</title>

  <style>

    div{

      width: 100px;

      height: 100px;

      border: 2px solid red;

      box-shadow:  3px 6px 8px darkblue  ,4px 8px 6px rebeccapurple inset;

    }

  </style>

</head>

<body>

   <div>微笑是最初的信仰，加油。</div>

</body>

</html>

CSS中使用文本阴影与元素阴影的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  3. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  4. HTML与CSS中的文本个人分享

    文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...

  5. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  6. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  7. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  8. css中各种情况下的元素的垂直和水平居中的问题

    问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...

  9. 知方可补不足～CSS中的几个伪元素

    对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...

随机推荐

  1. Vue实现同级组件的通信

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.index.html <!DOCTYP ...

  2. 【b704 && BZOJ 1999】树网的核

    [题目链接]:http://noi.qz5z.com/viewtask.asp?id=b704 &&http://www.lydsy.com/JudgeOnline/problem.p ...

  3. win10系统激活 快捷方式

    系统不定期就会提示激活,每次激活都是找各种工具折腾,今天捣鼓简单的脚本直接激活~~ 首先查看自己系统的版本,后面才能找到合适的激活码 win+R 启动程序 输入 winver 即可查看系统版本 2.查 ...

  4. Java 5，6，7，8，9，10，11新特性吐血总结

    作者:拔剑少年 简书地址:https://www.jianshu.com/u/dad4d9675892 博客地址:https://it18monkey.github.io 转载请注明出处 java5 ...

  5. linux 一个写缓存例子

    我们已经几次提及 shortprint 驱动; 现在是时候真正看看. 这个模块为并口实现一个非 常简单, 面向输出的驱动; 它是足够的, 但是, 来使能文件打印. 如果你选择来测试这个 驱动, 但是, ...

  6. Github上的英文解释

    1.AFAIK: As far as I know.  据我所知 2.SPOF: Single point of failure. 单节点崩溃 3.ASAP: As soon as possible. ...

  7. HTML自制计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 红米K20 Pro 传感器失效解决方案

    最近把Redmi K20 Pro升级到了安卓Q,用了几天,不好用,总是提示屏幕前方有遮挡,于是刷回了安卓9,但是发现重力感应传感器失效了,屏幕不会随这方向转,导航的时候看起来很难受. 网上查了一下,要 ...

  9. 【Docker Compose】简介与安装

    1.简介 Compose 是一个用户定义和运行多个容器的 Docker 应用程序.在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要一个简单的命令,就可以创建并启动你配置 ...

  10. Visual Studio Team Services使用教程【3】：默认团队权限说明

    2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...