码迷,mamicode.com
首页 > Web开发 > 详细

css3--文字效果

时间:2018-05-12 12:46:52      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:image   padding   指定   not   png   pre   hidden   charset   set   

text-shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3文本</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }

  h1 {
      text-shadow: 5px 5px 5px red; /*x轴,y轴,模糊程度,颜色*/
  }
</style>
</head>
<body>
  <h1>Marvel Comics</h1>
</body>
</html>

效果如下:

技术分享图片

 

 

CSS3文本溢出属性指定应向用户如何显示溢出内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3文本效果</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }

  div.test {
      width: 12em;
      white-space: nowrap; /*文本显示在一行*/
      overflow: hidden;    /*超出文本的区域隐藏掉*/
      border: 1px solid #000;
  }
</style>
</head>
<body>
  <div class="test" style="text-overflow: ellipsis;">
    This is some long text that will not fit in the box
  </div>

  <div class="test">
    This is some long text that will fit in the box
  </div>

  <div class="test" style="text-overflow: ‘>>‘">
    This is some long text that will fit in the box
  </div>
</body>
</html>

效果如下:

技术分享图片

clip:默认

ellipsis:文本溢出显示省略号

text-overflow: ‘>>‘:只在火狐浏览器下有效

 

css3--文字效果

标签:image   padding   指定   not   png   pre   hidden   charset   set   

原文地址:https://www.cnblogs.com/qjuly/p/9028213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!