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

Sample code for achieving small triangle border effect with pure CSS3+DIV

The specific code is as follows: The html code is...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

Use of MySQL truncate table statement

The Truncate table statement is used to delete/tr...

MySQL paging performance exploration

Several common paging methods: 1. Escalator metho...

A brief discussion on using Cartesian product principle to query multiple tables in MySQL

MySQL multi-table query (Cartesian product princi...

Detailed steps to install mysql5.7.18 on Mac

1. Tools We need two tools now: MySQL server (mys...

MySQL database design: detailed explanation of Schema operation method using Python

Before the arrow was shot, the bow whispered to t...

Vue uses el-tree lazy loading to implement the add, delete, modify and query functions

About the tree display of Vue, the project is use...

Pure CSS to change the color of the picture

The css technique for changing the color of an im...

Example of MySQL auto-increment ID exhaustion

Display Definition ID When the auto-increment ID ...

Application examples of WeChat applet virtual list

Table of contents Preface What is a virtual list?...

Summary of methods to prevent users from submitting forms repeatedly

Duplicate form submission is the most common and ...

mysqldump parameters you may not know

In the previous article, it was mentioned that th...

mysql: [ERROR] unknown option '--skip-grant-tables'

MySQL database reports ERROR 1045 (28000): Access...

Detailed explanation of MySQL slow log query

Slow log query function The main function of slow...