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

MySQL SQL statement to find duplicate data based on one or more fields

Detailed explanation of CSS3 text shadow text-shadow property

MySQL SQL statement to find duplicate data based on one or more fields

WeChat applet custom scroll-view example code

Solution to Ubuntu 18.04 not being able to connect to the network in VMware virtual machine

Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

Let's talk about my understanding and application of React Context

Limit input type (multiple methods)

How to use VIM editor in Linux

HTML Editing Basics (A Must-Read for Newbies)

Recommended 20 best free English handwriting fonts

How to deploy MySQL and Redis services using Docker

Recommend

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

Tutorial on how to deploy LNMP and enable HTTPS service

Elementui exports data to xlsx and excel tables

How to prevent hyperlinks from jumping when using a link

Pure CSS to achieve horizontal line animation under the element (background-image)

Summary of MySQL Architecture Knowledge Points

How to do a good refactoring is not only refactoring the code but also refactoring life

my.cnf (my.ini) important parameter optimization configuration instructions

A brief discussion on the principle of js QR code scanning login

HTML hyperlink style (four different states) setting example

Detailed explanation of the process of creating floor navigation effects with JavaScript

Win10+Ubuntu 20.04 LTS dual system installation (UEFI + GPT) (pictures and text, multiple pictures warning)

How to handle the tcp_mark_head_lost error reported by the Linux system

Common writing examples for MySQL and Oracle batch insert SQL

MySQL: mysql functions