【CSS】文字特效（text-shadow）

学习委员

关注

发布于: 2021 年 01 月 16 日

以下案例都需要有一定的 html 和 css 基础。

html 基础方面没过多要求，主要是 css 需要知道 text-shadow 的用法。

text-shadow 的基础知识可以看 CSS3 text-shadow 属性，本文不做详细讲解。

以下每个案例，都是用一个 <h1> 标签包裹文字，后面跟着 css 代码。

案例 1

<h1>Rabbit</h1>
<style>body {	background: #0f93c4;}
h1 {  color: #fff;  font: 5em Brush Script MT;  text-shadow: 0 1px 0 #ccc,    0 2px 0 #c9c9c9,    0 3px 0 #bbb,    0 4px 0 #b9b9b9,    0 5px 0 #aaa,    0 6px 1px rgba(0,0,0,.1),    0 0 5px rgba(0,0,0,.1),    0 1px 3px rgba(0,0,0,.3),    0 3px 5px rgba(0,0,0,.2),    0 5px 10px rgba(0,0,0,.25),    0 10px 10px rgba(0,0,0,.2),    0 20px 20px rgba(0,0,0,.15);}</style>

复制代码

Brush Script MT 是一种字体

案例 2

<h1>Rabbit</h1>
<style>body {	background: #fbfbfb;}
h1 {  font-size: 5em;  color: #9e110a;  text-shadow: 4px 4px 0px #fff,    10px 10px 0px #cbcbcd;}</style>

复制代码

案例 3

<h1>Rabbit</h1>
<style>body {  background: #b1ccc3;}
h1 {  font: 5em Brush Script MT;  color: #a5536a;  text-shadow: -4px -2px 0 #fff;}</style>

复制代码

Brush Script MT 是一种字体

案例 4

<h1>Rabbit</h1>
<style>body {  background: #d5d8d1;}
h1 {  font-size: 5em;  color:rgba(67,153,97,.5);  text-shadow:4px 4px 0 rgba(236,144,79, 0.6);}</style>

复制代码

案例 5

<h1>Rabbit</h1>
<style>body {  background: #474747;}
h1 {  font: bold 5em Brush Script MT ;  color:#222;  text-shadow: 0px 2px 3px #666;}</style>

复制代码

Brush Script MT 是一种字体

发布于: 2021 年 01 月 16 日阅读数: 13

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

【CSS】文字特效（text-shadow）

案例 1

案例 2

案例 3

案例 4

案例 5

学习委员

评论