CSS / text-shadow阴影效果
一、定义解释
1、属性
box-shadow是css3的一个新属性
2、参数
box-shadow的四个参数
(1)h-shadow:必需、水平阴影的位置、允许负值
(2)v-shadow:必需、垂直阴影的位置、允许负值
(3)blur:可选、模糊距离【既然是距离肯定就不会是负值,下面的也是一个道理】
(4)color:可选、阴影的颜色
3、方向问题
h-shadow:正值,显示在左侧
负值,显示在右侧
0,显示原文字底部
v-shadow:正值,显示的在下侧
负值,显示的在上侧
0,显示在原文字底部
即:X轴正直向右,Y轴正直向下,0值在文字底部
二、实例说明
1、影子效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span>
</div>
.divTwo{width: 400px;height: 80px;background-color: white;margin-left: 50px;display: flex;align-items: center;justify-content: center;}.divTwo span{text-shadow:0px 10px 2px #333333; // 图一样式text-shadow:-10px -10px 1px #E8503F; // 图二样式}
2、发光效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span>
</div>
.divTwo{width: 400px;height: 80px;background-color: white;margin-left: 50px;display: flex;align-items: center;justify-content: center;}.divTwo span{text-shadow:0px 0px 6px rgb(103, 78, 212);font-size: 22px;font-weight: bold;color: rgb(103, 78, 212);}
3、多色阴影效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span>
</div>.divTwo{width: 400px;height: 80px;background-color: white;margin-left: 50px;display: flex;align-items: center;justify-content: center;
}
.divTwo span{text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006; color:red;
}
4、火焰效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span></div>
.divTwo{width: 400px;height: 80px;background-color: black;margin-left: 50px;display: flex;align-items: center;justify-content: center;
}
.divTwo span{ text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 9px #f80,2px -25px 15px #f20; color:red; font-size: 18px;
}
5、立体凸起效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span>
</div>
.divTwo{width: 400px;height: 80px;background-color: black;margin-left: 50px;display: flex;align-items: center;justify-content: center;
}
.divTwo span{ text-shadow: -1px -1px white,1px 1px #333; color:#D1D1D1; font-weight: bold; background: #CCC;
}
6、描边效果
<div class="divTwo"><span>Text Shadow(文本阴影)-Css3演示</span></div>
.divTwo{width: 400px;height: 80px;background-color: black;margin-left: 50px;display: flex;align-items: center;justify-content: center;}.divTwo span{ text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black; color:#ffffff; background: #CCC; }
借鉴地址
https://www.html.cn/tool/css3Preview/Box-Shadow.html
佚名:https://www.jb51.net/css/488398.html
w3school:https://www.w3school.com.cn/cssref/pr_text-shadow.asp
CSS / text-shadow阴影效果相关推荐
- 文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
- CSS实现的阴影效果
一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们可以直接用PhotoShop直接制作带阴影的图片以供使用 但是对于一些和用户交互的,特别是对于一些简单的文字层,如果用图片就不太好处理. 这里介绍 ...
- 2000 Followers-3D CSS text
2000 Followers-3D CSS text 示例 HTML CSS 更多有趣示例 尽在知屋安砖社区 示例 HTML - var density = 12 //Be sure to chang ...
- CSS实现带阴影效果的三角形
目标效果 用将width和height设置为0,通过border特性来实现三角形的效果的方法,想必很多人都实现过. 但是如果要求三角形边缘具有阴影效果,这样一来以前的实现方式显然是不行,因为box-s ...
- CSS Text Decoration
大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新的特性.本文将介绍 Level 4 中最新添加的特性. CSS Text Decoration 文字修饰线: ...
- CSS如何添加阴影效果?
在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框(图像)阴影.下面本篇文章就来给大家介绍一下CSS的阴影效果属性,CSS添加阴影效果的方法,希望对大家有所帮助. 1.添加文本阴影 在CSS ...
- CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- CSS.text不被选中
1. text{-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; ...
- CSS DIV Shadow
css code: /*2011-11-28 塗聚文 締友計算機信息技術有限公司CSS DIV Shadowcss3 */#geovinduDiv-shadow {padding:10px;backg ...
最新文章
- Linux下日志文件过大解决方案
- python 03 字符串详解
- AndroidStuido编译release版本apk(非签名apk)
- 信息检索Information Retrieval评价指标
- 剑指offer:栈的压入、弹出序列
- Ant远程部署到Tomcat
- CloudFoundry应用的自定义端口的命令行设置方式
- DOM事件与jQuery事件的是非纠葛
- 利用线性代数的方法求斐波那契数列的通项
- 2012 安装mysql 5.6_如何安装mysql server 5.6
- 理论基础 —— 排序 —— 基数排序
- 4个值得注意的点(先记后写)
- 吴裕雄 python 机器学习——多项式贝叶斯分类器MultinomialNB模型
- 寒冬已至?四面楚歌的 Android 工程师该何去何从?
- linux下反汇编命令,Linux命令学习手册-objdump命令
- 11、旋转数组的最小数字
- SQL入门经典思维导图学习
- R语言数据接口(下载、读取、写入)
- 矢量分析 关于∇一些矢量恒等式速记法
- win10打字不显示选字框