Detailed explanation of CSS3 text shadow text-shadow property

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
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.      < meta   charset = "UTF-8" >   
  5.      < title > text-shadow </ title >   
  6.      < style >   
  7. p{
  8. text-align:center;
  9. margin:0;
  10. font-family: helvetica,arial,sans-serif;
  11. color:#999;
  12. font-size:80px;
  13. font-weight:bold;
  14. text-shadow:10px 10px #333;
  15. }
  16.      </ style >   
  17. </ head >   
  18. < body >   
  19.      < p > Text Shadow </ p >   
  20. </ body >   
  21. </ 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
  1. <!DOCTYPE html >   
  2.   < html   lang = "en" >   
  3.   < head >   
  4.       < meta   charset = "UTF-8" >   
  5.       < title > text-shadow </ title >   
  6.       < style >   
  7. p{
  8. text-align:center;
  9. margin:0;
  10. font-family: helvetica,arial,sans-serif;
  11. color:#999;
  12. font-size:80px;
  13. font-weight:bold;
  14. text-shadow:-1px -1px #fff,
  15. 1px 1px #333;
  16. }
  17.       </ style >   
  18.   </ head >   
  19.   < body >   
  20.       < p > Text Shadow </ p >   
  21.   </ body >   
  22.   </ 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

Recommend

js array entries() Get iteration method

Table of contents 1. Detailed syntax of entires()...

MYSQL database basics - Join operation principle

Join uses the Nested-Loop Join algorithm. There a...

Baota Linux panel command list

Table of contents Install Pagoda Management Pagod...

JavaScript Document Object Model DOM

Table of contents 1. JavaScript can change all HT...

Detailed steps for setting up host Nginx + Docker WordPress Mysql

environment Linux 3.10.0-693.el7.x86_64 Docker ve...

MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)

What I have been learning recently involves knowl...

MySql COALESCE function usage code example

COALESCE is a function that refers to each parame...

Detailed explanation of JS variable storage deep copy and shallow copy

Table of contents Variable type and storage space...

mysql5.5.28 installation tutorial is super detailed!

mysql5.5.28 installation tutorial for your refere...

Typical cases of MySQL index failure

Table of contents Typical Cases Appendix: Common ...

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

need: In the near future, we will implement the l...

MySQL starts slow SQL and analyzes the causes

Step 1. Enable MySQL slow query Method 1: Modify ...

Detailed explanation of MySQL combined query

Using UNION Most SQL queries consist of a single ...

Linux disk management LVM usage

1. Introduction to LVM When we manage Linux disks...

Vue close browser logout implementation example

Table of contents 1. beforeunload event 2. Unload...