常用css样式整理
1. css 文本显示一行,超出显示…
//一行
width:100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行 当文本所在的盒子太高时,注意设置line-height,
//否则肯能会出现第三行显示一半的情况
width:100px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
2.css3实现背景颜色渐变
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
//第一个参数:设置渐变的起始位置 /第二个参数:设置起始位置的颜色 /第三个参数:设置终止位置的颜色
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色 /第二个参数:渐变终止位置的颜色 /第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
3.CSS3下的渐变文字效果实现
方法一:借助mask-image属性
手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:
相应的HTML代码如下:
<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>
与HTML相对应的CSS代码如下:
.text-gradient {
display: inline-block;
font-family: '微软雅黑';
font-size: 10em;
position: relative;
}
.text-gradient[data-text]::after {
content: attr(data-text);
color: green;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}
方法二:background-clip + text-fill-color下的实现
.text-gradient {
display: inline-block;
color: green;
font-size: 10em;
font-family: '微软雅黑';
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
};
CSS代码中关键有用的其实就是最后三行:
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
4. CSS3的文字阴影—text-shadow
text-shadow: h-shadow v-shadow blur color;
/* text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
* h-shadow 必需。水平阴影的位置。允许负值。
* v-shadow 必需。垂直阴影的位置。允许负值。
* blur 可选。模糊的距离。
* color 可选。阴影的颜色。参阅 CSS 颜色值。
* 默认值: none
* 继承性: yes
* 版本: CSS3
* JavaScript 语法: object.style.textShadow="2px 2px #ff0000"
* 以数学的直角坐标系为参考,h-shadow的正值就是x轴的正值,但是v-shadow的正值是y轴的负值
*/
火焰文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #000;}
p{
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>火焰文字:text-shadow</p>
</body>
</html>
立体文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #ccc;}
p{
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #d1d1d1;
}
p:first-child{
text-shadow: -1px -1px white,
1px 1px #333;
}
p:last-child{
text-shadow: 1px 1px white,
-1px -1px #333;
}
</style>
</head>
<body>
<p>凸起文字:text-shadow</p>
<p>凹下文字:text-shadow</p>
</body>
</html>
外发光文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #ccc;}
p{
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #d1d1d1;
/* 多个相同的阴影列表会让阴影更加明显 */
text-shadow: 0 0 0.2em #F87,
0 0 0.2em #F87;
}
</style>
</head>
<body>
<p>外发光文字:text-shadow</p>
</body>
</html>