css3的文字效果,text-shadow和word-wrap

原创 2013年12月03日 10:05:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	h1{
		text-shadow:#F00 5px 5px 5px;
	}
	p{
		width:11em;
		border:1px solid #F00;
	}
	.word-wrap{
		word-wrap:break-word;
	}
</style>

<title>无标题文档</title>
</head>

<body>

<h1>这个是text-shadow的文字阴影效</h1>

<div>
	<p>这个无属性的文字。abcdefghijklmn bcdefghijklmnabcdefghijklmn.abcdefghijklmn。abcdefghijklmn</p>
	<p class="word-wrap">这个是word-wrap的自动换行效果。abcdefghijklmn bcdefghijklmnabcdefghijklmn.abcdefghijklmn。abcdefghijklmn</p>
</div>
</body>
</html>

效果图:


版权声明:原创文章,请标明出处~~~

相关文章推荐

了解CSS3的文字阴影效果 - Text Shadow effects

日期:2012-4-8  来源:GBin1.com 以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow...
  • jjfat
  • jjfat
  • 2012年04月10日 15:04
  • 651

如何利用CSS3制作3D文字效果

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial。 这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文...

纯CSS3文字效果推荐

转自:http://blog.csdn.net/whqet/article/details/24793049 之前曾经研究过几个纯css实现的文字效果,《CSS文字条纹阴影动画》和《...

CSS3之文字阴影text-shadow

最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大...

css3 ——text-shadow使用阴影叠加出的燃烧的文字特效

text-shadow body { background:#000;} p { text-align:center; padding:24px; margin:0; font-family:...

CSS3之阴影-文字阴影text-shadow

CSS3中新增属性-阴影,可以做出很多漂亮的效果。   文字阴影text-shadow   text-shadow属性值的顺序:   text-shadow: h-...

CSS3的文字阴影—text-shadow

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴...

CSS3的文字阴影—text-shadow

CSS3的文字阴影—text-shadow 作者:大漠 日期:2011-05-10 点击:15471  前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radiu...

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法: text-shadow : none |  none | [, ] *  或none | [, ]* 相关属性 : 无 取值:  :指定颜色。 :由浮点数字和单位标识符组成...

溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space

一、首先依次介绍这几个文字处理的CSS属性 1、word-break:  word-break 属性规定自动换行的处理方法。 当行尾放不下一个单词时,决定单词内部该怎么摆放。  b...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文字效果,text-shadow和word-wrap
举报原因:
原因补充:

(最多只允许输入30个字)