【web】特效阴影（用法+例子）

阴影

用法：

box-shadow

box-shadow: 5px 5px 5px tomato;

第一个参数：横向偏移量，向右偏移正数，向左偏移负数
第二个参数：纵向偏移量，向下偏移正数，向上偏移负数
第三个参数：模糊距离，越大越模糊
第四个参数：阴影颜色

text-shadow

第一个参数：横向偏移量，向右偏移正数，向左偏移负数
第二个参数：纵向偏移量，向下偏移正数，向上偏移负数
第三个参数：模糊距离，越大越模糊
第四个参数：阴影颜色

例子

效果图：

代码：

<style>* {margin: 0;padding: 0;}html {font-size: 62.5%;}p {height: 100px;width: 500px;line-height: 100px;text-align: center;margin: 0 auto;font-size: 7rem;}/*第一句*/p:nth-of-type(1) {background-color: #d5d2c2;color: transparent;/*透明*/-webkit-text-stroke:1px black;/*描边*/}/*第二句*/p:nth-of-type(2) {background-color: #454545;color: #333;text-shadow: -1px -1px 0 #cecece,/*右上角*/1px  1px 0 #5c5c5c;/*左下角*/}/*第三句*/p:nth-of-type(3) {background-color: #000;color: #fff;text-shadow: -5px -5px 8px #cd12c8,5px  -5px 8px #cd12c8,-5px 5px 8px #cd12c8,5px 5px 8px #cd12c8;}/*第四句*/p:nth-of-type(4) {background-color: #ccc;color: #fff;text-shadow: 0 1px 0 #eee,0 2px 0 #bcbcbc,0 3px 0 #aaa,0 4px 0 #999,0 5px 0 #787878,0 6px 0 #666;}/*第五句*/p:nth-of-type(5) {background-color: #eee;color: rgba(255, 255, 255, 0);text-shadow: 0 0 6px hotpink;}</style>
<body><p>静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p>
</body>

【web】特效阴影（用法+例子）相关推荐

html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
hackbar 使用教程_〖教程〗K8飞刀-网络安全CTF解题Web篇10个例子
[教程]K8飞刀-网络安全CTF解题Web篇10个例子前段时间有人和我说什么时候有空出些CTF用的工具,实际上CTF考查的内容,实战中用到的很多工具都可以使用,关键在于你懂不懂用.也看到有人搜索如何 ...
【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变盒阴影对象选择器 {box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色 } 投影方式:此参数是一个可选值,如果 ...
地图选择器怎么用_简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用....
[ 这是简易数据分析系列的第 15 篇文章 ] 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进 ...
thymleaf用法例子
学习视频:https://www.bilibili.com/video/BV1gW411W76m?t=1978&p=31 之前的网页开发.为了进行数据交互.必须整成jsp页面!然而,sprin ...
Python中threading的join和setDaemon的区别及用法例子
Python中threading的join和setDaemon的区别及用法 Python多线程编程时,经常会用到join()和setDaemon()方法,今天特地研究了一下两者的区别. 1.join ...
javawhile语句的用法例子_Python语句之循环
不论什么编程语言,第一次学习都会讲到"hello world",都会讲到循环.同样在python的世界中也是有循环的.当然在我们的系统业务流程上也是可以有循环存在的,比如重复添加数 ...
webwork 标签基本用法例子
jsp 页面调用 action <result name="mgtsd1" type="redirect">/market/magercentAc ...
c语言结构体的用法例子,c语言结构体入门
在说结构体之前,我们先来看看类型和变量比如 int a; int是类型名,a是变量名变量名是我们自己定义的,可以改成其他名字,但是int,char这些类型名是不能修改的而结构体可以让我们自己定义 ...

【web】特效阴影（用法+例子）

阴影

用法：

box-shadow

text-shadow

例子

【web】特效阴影（用法+例子）相关推荐

最新文章

热门文章

【web】特效 阴影（用法+例子）

阴影

用法：

box-shadow

text-shadow

例子

【web】特效 阴影（用法+例子）相关推荐

最新文章

热门文章

【web】特效阴影（用法+例子）

【web】特效阴影（用法+例子）相关推荐