DIV CSS3 text-shadow font shadow (code example)-CSS Tutorial-php.cn

DIV CSS3 text-shadow font shadow (code example)

云罗郡主

Release： 2018-10-16 14:21:03

forward

2381 people have browsed it

The content this article brings to you is about DIV CSS3 text-shadow font shadow (code example). It has certain reference value. Friends in need can refer to it. I hope It will help you.

1. CSS3 words and grammar

1. CSS3 words:
text-shadow

2. Grammar structure

p{text-shadow:5px 2px 6px #000;}

Copy after login

Set the text shadow effect in the p box to start showing the shadow effect 5px from the left and 2px from the top. At the same time, the shadow size range is 6px and the shadow color is black (#000).

3. Description
There are 4 values in total for the text display shadow effect. The first value represents the distance from the left to start showing the shadow effect, the second value represents the distance from the left to start showing the shadow effect, and the third value represents the distance to the left to start showing the shadow effect. The first value represents the shadow range size, and the fourth value is the shadow effect color.

2. Case

1. Case HTML code

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字体阴影 在线演示 DIVCSS5</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div>我阴影文字</div> 
<div class="txt">文字阴影测试内容1</div> 
<div class="txt2">文字阴影测试内容2</div> 
</body> 
</html>

Copy after login

2. Corresponding CSS code:

.txt {text-shadow:5px 1px 6px #F93 }  
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}

Copy after login

The above is the DIV CSS3 text-shadow font shadow (Code examples) full introduction, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of DIV CSS3 text-shadow font shadow (code example). For more information, please follow other related articles on the PHP Chinese website!