Detailed explanation of CSS3 text shadow text-shadow property

Text shadow text-shadow property effects:

1. Lower right corner shadow, lower left corner shadow, upper left corner shadow, upper right corner shadow

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > text-shadow </ title >
< style >
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</ style >
</ head >
< body >
< p > Text Shadow </ p >
</ body >
</ html >

The text effect is:

If you change text-shadow to: text-shadow:-10px 10px #333, a shadow will appear in the lower left corner.

Change text-shadow to: text-shadow:-10px -10px #333 , and a shadow will appear in the upper left corner

Change text-shadow to: text-shadow: 10px -10px #333 , and a shadow will appear in the upper right corner

2. Use text-shadow to create a 3D text effect

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > text-shadow </ title >
< style >
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
}
</ style >
</ head >
< body >
< p > Text Shadow </ p >
</ body >
</ html >

The above detailed explanation of CSS3 text shadow text-shadow property is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<: MySQL table type storage engine selection

>>: The hottest trends in web design UI in 2013 The most popular UI designs

Detailed explanation of Vue px to rem configuration

Detailed explanation of CSS3 text shadow text-shadow property

Detailed explanation of Vue px to rem configuration

4 solutions to CSS browser compatibility issues

Basic steps to use Mysql SSH tunnel connection

Web designer is a suitable talent

Two ways to implement HTML to randomly drag content positions

mysql settings to change the root password, mysql server connection, mysql common commands diagram

Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

Tutorial on installing MySQL 8.0.11 using RPM on Linux (CentOS7)

Detailed explanation of vite2.0+vue3 mobile project

MySQL 5.7.10 installation and configuration tutorial under Windows

Recommend

How to deploy the crownblog project to Alibaba Cloud using docker

Detailed usage of MYSQL row_number() and over() functions

Hide HTML elements through display or visibility

Deleting the database and running away? How to use xtraback to back up the MySQL database

Detailed explanation of the use of Teleport in Vue3

The difference between Div and table in HTML (discussed in detail in all aspects)

Why does MySQL paging become slower and slower when using limit?

Detailed tutorial on installing Spring boot applications on Linux systems

jQuery plugin to achieve image suspension

CentOS 7 cannot access the Internet after modifying the network card

Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster

JS realizes automatic playback of timeline

Deploy the Vue project on a Linux server

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

The difference between br and br/ in HTML