文本阴影介绍

  • 在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. navicat ssh通道受限问题处理

    navicat 链接数据库 使用navicat 的ssh通道连接数据库回遇到权限问题 错误代码如下: 80070007: SSH Tunnel: Server does not support dif ...

  2. H5 操作class 类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【js】 vue 2.5.1 源码学习（六） initProxy initLifeCycle 渲染函数的作用域代理

    大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...

  4. IDEA开发 工具IC和IU的区别

    现在很多人都在用IDEA开发工具,那么下载安装时会有ideaIU和ideaIC两个版本,到底该怎么选择呢? 首先: ideaIU:U代表的是Ultimate,这个是官方旗舰版也就是商用版本,官方只提供 ...

  5. 前端js页面跳转

    window.location.Reload() //刷新当前页面self.location=document.referrer;通过Request Headers中Referer获得上个页面的地址并 ...

  6. 由“Sysnative”引发的思考

    在64位的Windows系统中,有个非常神秘的文件夹“Sysnative”,你无法通过Explorer去访问它,甚至你都无法找到它,但它却扮演了一个非常重要的角色.下面我们就来聊聊它. 32位和64位 ...

  7. Channel 9视频整理【2】

    JadeChang https://channel9.msdn.com/Niners/JadeChang 繁体中文视频 2016 Nano Server / Docker / Containers 打 ...

  8. Object 与 Function那神奇而混乱的搞基关系

    // Object 与 Function神奇而混乱的搞基关系... Object.__proto__ === Function.prototype; // true Object.__proto__ ...

  9. 【Python系统学习02】数据类型与类型转换

    一.数据类型 字符串 整数 浮点数 [补充中...] 1.字符串 str 字符串:英文string,简写str. name = '小石头:' print(name,'2019', '12', '24' ...

  10. 记录nfs的防火墙以及权限问题

    在前面的一篇文章(https://www.cnblogs.com/zyxnhr/p/10660431.html)中,已经介绍了nfs的安装挂载使用,但是存在两个问题 一. 防火墙 在nfs和nfs的守 ...