CSS3文本效果

1.1文本阴影

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

实例：

.text-shadow {
padding: 10px;
text-shadow: 5px 5px 5px #FF0000;
}

效果：

1.2盒子阴影

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

实例：

.box-shadow {
padding: 10px;
box-shadow: 10px 10px 5px #999999;
}

效果：

1.3在伪元素中添加阴影效果

.shadow {
width: 400px;
padding: 10px;
background: white;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.shadow img {
border: 1px solid #8a4419;
border-style: inset;
}
.shadow::after {
content: '';
position: absolute;
width: 70%;
height: 100px;
left: 15%;
bottom: 0;
z-index: -1;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

 效果：

 1.4卡片效果

实例：

.card {
width: 250px;
height: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card h2 {
margin: 0;
width: 250px;
height: 150px;
color: white;
font-size: 30px;
text-align: center;
line-height: 150px;
background-color: #4CAF50;
}
.card p {
margin: 0;
width: 250px;
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
}

效果：

 1.5文本溢出

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

实例：

p.clip {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
white-space: nowrap;
text-overflow: clip;
}
p.ellipsis {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
white-space: nowrap;
text-overflow: ellipsis;
}

效果：

如果需要保留两行文本，并省略溢出文本，则可以设置如下样式：

p.line-clamp {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}

 效果：

1.6CSS3字体(服务器端字体)

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您 " 自己的 " 的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont ），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont) ：

<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family:myFirstFont;
}
</style>