CSS3 文本效果

2019-09-10 郑州网站建设  

CSS3中包含几个新的文本特征。

在我这里您将了解以下文本属性:

text-shadow

box-shadow

text-overflow

word-wrap

word-break

浏览器支持

属性          
text-shadow   4.0   10.0   3.5   4.0   9.5  
box-shadow   10.04.0 -webkit-   9.0   4.03.5 -moz-   5.13.1 -webkit-   10.5  
text-overflow   4.0   6.0   7.0   3.1   11.09.0 -o-  
word-wrap   23.0   5.5   3.5   6.1   12.1  
word-break   4.0   5.5   15.0   3.1   15.0  

CSS3 的文本阴影

CSS3 中,text-shadow属性适用于文本阴影。

CSS3 文本效果

您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的色彩:

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

实例

给标题添加阴影:

h1{text-shadow:5px5px5px#FF0000;}

CSS3 文本效果

CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例

div{box-shadow:10px10px;}

接下来给阴影添加色彩

实例

div{box-shadow:10px10pxgrey;}

CSS3 文本效果

接下来给阴影添加一个模糊效果

实例

div{box-shadow:10px10px5pxgrey;}

尝试一下 »

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

实例

#boxshadow{position:relative; box-shadow:1px2px4pxrgba(0, 0, 0, .5); padding:10px; background:white;}#boxshadowimg{width:100%; border:1pxsolid#8a4419; border-style:inset;}#boxshadow::after{content: ''; position:absolute; z-index: -1; /* hide shadow behind image */box-shadow:015px20pxrgba(0, 0, 0, 0.3); width:70%; left:15%; /* one half of the remaining 30% */height:100px; bottom:0;}

CSS3 文本效果

阴影的一个使用特例是卡片效果

实例

div.card{width:250px; box-shadow:04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19); text-align:center;}

文字卡片 » 图片卡片 »

CSS3 Text Overflow属性

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

实例

p.test1{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:clip; }p.test2{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:ellipsis; }

尝试一下 »

CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

CSS代码如下:

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

CSS3 文本效果

实例

允许长文本换行:

p{word-wrap:break-word;}

尝试一下 »

CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则:

CSS代码如下:

实例

p.test1{word-break:keep-all;}p.test2{word-break:break-all;}

尝试一下 »


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1690.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • Ч
  • 文本
  • 包含
  • 特征