DIV中CSS3文本阴影字体阴影的使用示例

  介绍

这篇文章主要介绍了DIV中CSS3文本阴影字体阴影的使用示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

一,CSS3单词与语法

1, CSS3单词:
<强>文本阴影

2,语法结构

p{文本阴影:5 px  2 px  6 px  # 000;}

设置p盒子里文字阴影效果距离左5 px和距离上2 px开始显示阴影效果,同时阴影大小范围为6 px,阴影颜色为黑色(# 000)。

3,说明
文字显示阴影效果共4个值,第一个代表距离左多少距离开始显示阴影效果,第二个值代表距离上多少距离开始显示阴影效果,第三个值代表阴影范围大小,第四个值为阴影效果颜色。

二,案例

1,案例HTML代码

& lt; ! DOCTYPE  html>,   & lt; html  xmlns=癶ttp://www.w3.org/1999/xhtml"祝辞,   & lt; head>,   & lt; meta  http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/祝辞,   & lt; title>字体阴影,在线演示,DIVCSS5,   & lt; link  href=https://www.yisu.com/zixun/巴枷?style.css”rel="样式表" type=" text/css "/>      头   身体<>   
我阴影文字
  
文字阴影测试内容1
  
文字阴影测试内容2
  身体   

2,对应的CSS代码:

.txt {文本阴影:5 px  1 px  6 px  # F93 },,   .txt2 {文本阴影:1 px  1 px  1 px  # 000;,填充:10 px  0;,颜色:# FFF;,背景:# CCC}

感谢你能够认真阅读完这篇文章,希望小编分享的" DIV中CSS3文本阴影字体阴影的使用示例”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

DIV中CSS3文本阴影字体阴影的使用示例