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

Tutorial on how to deploy LNMP and enable HTTPS service

What is LNMP: Linux+Nginx+Mysql+(php-fpm,php-mysq...

Elementui exports data to xlsx and excel tables

Recently, I learned about the Vue project and cam...

Summary of MySQL Architecture Knowledge Points

1. Databases and database instances In the study ...

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

MyISAM storage engine The MyISAM storage engine i...

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

Table of contents The essence of QR code login Un...

HTML hyperlink style (four different states) setting example

Copy code The code is as follows: <style type=...

How to handle the tcp_mark_head_lost error reported by the Linux system

Problem Description Recently, a host reported the...

Common writing examples for MySQL and Oracle batch insert SQL

Table of contents For example: General writing: S...

MySQL: mysql functions

1. Built-in functions 1. Mathematical functions r...