CSS3文本效果
CSS3文本效果
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.0
4.0-webkit- 9.0 4.0
3.5-moz- 5.1
3.1-webkit- 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.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属性适用于文本阴影。
Textshadoweffect!
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
OperaSafariChromeFirefoxInternetExplorer
实例
给标题添加阴影:
h1
{
text-shadow:5px5px5px#FF0000;
}
尝试一下?
CSS3box-shadow属性
CSS3中CSS3box-shadow属性适用于盒子阴影
实例
div{
box-shadow:10px10px;
实例
div{
-webkit-column-rule-width:1px;/Chrome,Safari,Opera/
-moz-column-rule-width:1px;/Firefox/
column-rule-width:1px;
}
尝试一下?
column-rule-color属性指定了两列的边框颜色：
实例
div{
-webkit-column-rule-color:lightblue;/Chrome,Safari,Opera/
-moz-column-rule-color:lightblue;/Firefox/
column-rule-www.wang027.comcolor:lightblue;
column-rule属性是column-rule-所有属性的简写。
以下实例设置了列直接的边框的厚度，样式及颜色：
实例
-webkit-column-rule:1pxsolidlightblue;/Chrome,Safari,Opera/
-moz-column-rule:1pxsolidlightblue;/Firefox/
column-rule:1pxsolidlightblue;
}
尝试一下?
指定元素跨越多少列
以下实例指定元素跨越所有列：
实例
h2{
-webkit-column-span:all;/Chrome,Safari,Opera/
column-span:all;
}
尝试一下?
指定列的宽度
column-width属性指定了列的宽度。
实例
div{
-webkit-column-width:100px;/Chrome,Safari,Opera/
column-width:100px;
}
尝试一下?
接下来给阴影添加颜色
实例
div{
box-shadow:10px10pxgrey;
}
尝试一下?
接下来给阴影添加一个模糊效果
实例
div{
box-shadow:10px10px5pxgrey;
}
尝试一下?
你也可以在：：befor和：：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;/hideshadowbehindimage/
box-shadow:015px20pxrgba(0,0,0,0.3);
width:70%;
left:15%;/onehalfoftheremaining30%/
height:100px;
bottom:0;
}
尝试一下?
阴影的一个使用特例是卡片效果
实例
div.card{
width:250px;
box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
text-align:center;
}
}
文字卡片?图片卡片?
CSS3TextOverflow属性
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代码如下：
OperaSafariChromeFirefoxInternetExplorer
实例
允许长文本换行:
p{word-wrap:break-word;}
尝试一下?
CSS3WordBreaking
CSS3WordBreaking属性指定换行规则：
CSS代码如下：
实例
p.test1{
word-break:keep-all;
}
p.test2{
word-break:break-all;
}
尝试一下?
新文本属性
属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当text-align设置为"justify"时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
|
|
