欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果 文字特效 效果 有大用

shiping1 的头像
星期六, 2014-09-20 09:32 — shiping1

CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果

分类： jsp/servlet HTML5&CSS32013-10-30 14:06 598人阅读 评论(0) 收藏 举报
text-shadow: x位移 y位移 模糊程度 颜色 


利用text-shadow属性的特性，同时在上，下，左，右中个方向为文字设置多个阴影，且不设置模糊作用距离(即默认没有模糊效果)，就可以实现文本的描边效果了。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>文本的描边效果</title>  
  6. <style type="text/css">  
  7. p{  
  8.     padding:50px;  
  9.     font-family:Verdana, Geneva, sans-serif;  
  10.     font-weight:bold;  
  11.     font-size:36px;  
  12.     background-color:#ccc;  
  13.     color:#ddd;  
  14.     /*普通的描边*/  
  15.     text-shadow:-1px 0px #333;      /*向左阴影*/  
  16.                 /*0px -1px #333;*/  /*向上阴影*/  
  17.                 /*1px 0 #333;*/     /*向右阴影*/  
  18.                 /*0px 1px #333;*/   /*向下阴影*/  
  19. }  
  20. </style>  
  21. </head>  
  22. <body>  
  23. <p>文本的描边效果</p>  
  24. </body>  
  25. </html>  


如果将向左和向上的阴影颜色设置为白色，文字就会有凸起的效果。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>文本的描边效果</title>  
  6. <style type="text/css">  
  7. p{  
  8.     padding:50px;  
  9.     font-family:Verdana, Geneva, sans-serif;  
  10.     font-weight:bold;  
  11.     font-size:36px;  
  12.     background-color:#ccc;  
  13.     color:#ddd;  
  14.       
  15.     /*文字凸起的效果*/  
  16.     text-shadow:-1px 0 #fff,    /*向左阴影*/  
  17.                 0 -1px #fff,    /*向上阴影*/  
  18.                 1px 0 #333,     /*向右阴影*/  
  19.                 0 1px #333;     /*向下阴影*/  
  20. }  
  21. </style>  
  22. </head>  
  23. <body>  
  24. <p>文本的描边效果</p>  
  25. </body>  
  26. </html>  


如果将向右和向下的阴影颜色设置为白色，文字就会有凹陷的效果。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>文本的描边效果</title>  
  6. <style type="text/css">  
  7. p{  
  8.     padding:50px;  
  9.     font-family:Verdana, Geneva, sans-serif;  
  10.     font-weight:bold;  
  11.     font-size:36px;  
  12.     background-color:#ccc;  
  13.     color:#ddd;  
  14.       
  15.     /*文字凹陷的效果*/  
  16.     text-shadow:-1px 0 #333,    /*向左阴影*/  
  17.                 0 -1px #333,    /*向上阴影*/  
  18.                 1px 0 #fff,     /*向右阴影*/  
  19.                 0 1px #fff;     /*向下阴影*/  
  20. }  
  21. </style>  
  22. </head>  
  23. <body>  
  24. <p>文本的描边效果</p>  
  25. </body>  
  26. </html>  


也可以利用text-shadow属性的特性，不设置水平和垂直的偏移距离，仅设置模糊作用距离，这样就可以通过修改模糊值来实现强度不同的发光效果了。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>文本的发光效果</title>  
  6. <style type="text/css">  
  7. p{  
  8.     padding:50px;  
  9.     font-family:Verdana, Geneva, sans-serif;  
  10.     font-weight:bold;  
  11.     font-size:36px;  
  12.     background-color:#ccc;  
  13.     color:#ddd;  
  14.     text-shadow:0 0 10px #00F;      /*没有偏移的模糊设置*/  
  15. }  
  16. </style>  
  17. </head>  
  18. <body>  
  19. <p>文本的发光效果</p>  
  20. </body>  
  21. </html>  




来自 http://blog.csdn.net/cryhelyxx/article/details/13626355
普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2