文本阴影介绍

  • 在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. C# 强转会不会抛出异常

    最近遇到一个小伙伴问我,从一个很大的数强转,会不会抛出异常.实际上不会出现异常 最简单的代码是使用一个比 maxvalue 大的数,然后用它强转 long tathkDucmmsc = int.Max ...

  2. pip安装python包时报字符编码错

    比如安装scikit-learn时报错: django ascii’ codec can’t encode character 原因是用户目录或用户名存在中文,ascii不能解码,解决办法是在Pyth ...

  3. 总结thinkphp快捷查询getBy、getField、getFieldBy用法及场景

    thinkphp作为国内现阶段最成熟的框架:没有之一: 不得不说是有好些特别方便的方法的: 然而如果初接触thinkphp的时候难免会被搞的有点迷茫: for example这些: getBy get ...

  4. 2018-2-13-C＃-通配符转正则

    title author date CreateTime categories C# 通配符转正则 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 ...

  5. Javascript中数组方法reduce的妙用之处

    Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从red ...

  6. ideaic快捷键

    Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...

  7. Java虚拟机-字节码执行引擎

    概述 Java虚拟机规范中制定了虚拟机字节码执行引擎的概念模型,成为各种虚拟机执行引擎的统一外观(Facade).不同的虚拟机引擎会包含两种执行模式,解释执行和编译执行. 运行时帧栈结构 栈帧(Sta ...

  8. IdentityServer4 Resources

    原文地址 Resources 的定义 通常在系统中是顶一个需要保护的资源.这些资源可是用户的信息,比如身份信息或者邮箱地址,也可以是某些API的访问权限. Note: 可以通过C#的对象模型或者通过数 ...

  9. 【k8s】kubeadm快速部署Kubernetes

    1.Kubernetes 架构图 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Mast ...

  10. 【Ubuntu】查看端口占用及关闭

    1.查看已连接的服务端口 (ESTABLISHED) netstat有一个快捷键[ss] netstat -a ss -a 2.查看所有的服务端口(LISTEN,ESTABLISHED) netsta ...