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

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

Detailed explanation of the interaction between React Native and IOS

Table of contents Prerequisites RN passes value t...

An Uncommon Error and Solution for SQL Server Full Backup

1. Error details Once when manually performing a ...

How to use module fs file system in Nodejs

Table of contents Overview File Descriptors Synch...

A very detailed explanation of the Linux DHCP service

Table of contents 1. DHCP Service (Dynamic Host C...

Three properties of javascript objects

Table of contents 1. writable: writable 2. enumer...

Priority analysis of and or queries in MySQL

This may be an issue that is easily overlooked. F...

Detailed tutorial on installing Mysql5.7.19 on Centos7 under Linux

1. Download MySQL URL: https://dev.mysql.com/down...

Solution to PHP not being able to be parsed after nginx installation is complete

Table of contents Method 1 Method 2 After install...

Detailed explanation of the execution process of mysql update statement

There was an article about the execution process ...

Comparison of the use of form element attributes readonly and disabled

1) Scope of application: readonly:input[type="...

mysql join query (left join, right join, inner join)

1. Common connections for mysql INNER JOIN (inner...

Using Nginx to implement grayscale release

Grayscale release refers to a release method that...

Detailed steps for completely uninstalling MySQL 5.7

This article mainly summarizes various problems o...

HTML table markup tutorial (2): table border attributes BORDER

By default, the border of the table is 0, and we ...