文本阴影介绍

  • 在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之webpack的安装与配置及其简单应用

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. 关于IFRAME的onload事件

    昨天遇到一个关于iframe的问题,比如a页面中嵌入了一个iframe称为a_iframe,如果直接在a_iframe的标签上直接加入属性的设置,onload=’’,这样才onload事件才是起作用的 ...

  3. H3C 路由优先级

  4. jquery的offset().top和js的offsetTop的区别，以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  5. ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统（4）

    接下来就是菜单管理了,菜单分为两部分,一部分是菜单管理,另一部分是左边的树形菜单 数据库添加菜单表Menus USE [MVCSystem] GO /****** Object: Table [dbo ...

  6. HTML自制计算器

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

  7. python multiprocessing.freeze_support

    Running on windows platform, give me an error as below: File "C:\Python\lib\multiprocessing\for ...

  8. axure公式的使用和局部变量简介

    什么时候有公式?当前面是值的时候后面都可以用公式 公式怎么用?1.公式里直接写入字符串 2.变量([变量])加上字符串 3.[[]]里面运算 外面字符串 两个中括号里的变量就可以计算或者显示默认值而不 ...

  9. 深入谷歌和甲骨文旷日持久的版权战争,趣味科普当前最火的编程语言JAVA的前世今生

    这篇文章是我在B站上投稿的一个科普java的视频文案,内容如标题,感兴趣的码农朋友可以移步观看https://www.bilibili.com/video/av81171108/ 在过去短短几十年间, ...

  10. Spring Boot 定时+多线程执行

    Spring Boot 定时任务有多种实现方式,我在一个微型项目中通过注解方式执行定时任务. 具体执行的任务,通过多线程方式执行,单线程执行需要1小时的任务,多线程下5分钟就完成了. 执行效率提升10 ...