CSS3 一、文本阴影text-shadow属性

html教程评论563 views阅读模式

文本阴影text-shadow属性特效:

1.右下角阴影,左下角阴影,左上角阴影,右上角阴影

 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> 

文字效果为:

如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影

将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影

将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影

2.使用text-shadow设置立体文字效果

企鹅博客
  • 本文由 发表于 2019年9月4日 02:58:07
  • 转载请务必保留本文链接:https://www.qieseo.com/375246.html

发表评论