1.控制超出部分显示省略（单行）：
white-space: nowrap; text-overflow:ellipsis; overflow: hidden;
下面使用css3部分控制多行超出部分显示省略（此处适配谷歌内核浏览器）：
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 设置最高值，防止超出部分显示出来 */ max-height: 30px;
2.实现标签背景透明，内容不透明：
background: rgba(255,255,255,0.6)!important;
3.调用服务器端字体：
@font-face{
font-family: "自定义字体名";
src:url(‘自定义字体名.ttf‘)format(‘opentype‘);
/* 指定自定义字体的格式 */
}
span{
font-family: "自定义字体名";
font-size: 36px;
}
4.使用css3实现渐变色（此处适配谷歌内核浏览器）：
.shade{
width: 300px;
height: 100px;
/* 对背景实现渐变 */
background:
-webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5)));
}
5.css3实现图片垂直水平居中（此处适配谷歌,火狐内核浏览器）：
<style type="text/css">
.content{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
border: 1px solid red;
width: 600px;
height: 500px;
}
</style>
<body>
<div class="content">
<img src="1.jpg" alt="">
</div>
</body>
时间： 2024-10-13 01:11:13