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

text-shadow CSS3
  • Lovejulyer
  • Lovejulyer
  • 2016年04月23日 01:00
  • 6588

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等,今天我们来研究几款文字效果,主要利用text-shadow、webkit内核的几个独有特性实现效果。...
  • whqet
  • whqet
  • 2014年05月04日 21:25
  • 28805

css中box-shadow属性与text-shadow属性

box-shadow就是在原来的块下复制了一份相同大小的块,放在原来的块下面,然后相对于左上角移动,做出类似阴影的效果,然后添加阴影的宽度以及阴影扩散的半径,最后就是颜色,另外一个inset属性放在最...
  • evilemon
  • evilemon
  • 2015年07月11日 20:39
  • 806

box-shadow和text-shadow两者比较

一、box-shadow box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: apx bpx cpx rgba(0,...
  • wang414300980
  • wang414300980
  • 2017年08月01日 15:37
  • 128

CSS3 box-shadow和text-shadow

一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影。 box-shadow box-shadow: h-shadow v-shadow blu...
  • ximengyun
  • ximengyun
  • 2013年05月06日 18:24
  • 696

【知了堂学习笔记】CSS3令人眼前一亮的网页文字效果

利用text-shadow,css3动画实现的文字效果
  • T_Texture
  • T_Texture
  • 2017年08月31日 19:26
  • 530

css3-文本阴影效果、凹凸效果

p{ font-size: 150px; font-family: "Microsoft Yahei"; text-align:...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:35
  • 1332

CSS3 Text-shadow

扯几句闲: text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产...
  • studyrzy
  • studyrzy
  • 2013年04月17日 14:41
  • 745

浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect

利用border属性: 以下三角为例,把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月01日 12:00
  • 635

【css】你了解word-wrap和word-break的区别吗?

word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 word-break: c...
  • hongxiaoshuang
  • hongxiaoshuang
  • 2016年11月04日 17:20
  • 629
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文字效果,text-shadow和word-wrap
举报原因:
原因补充:

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