常用css样式整理

最新推荐文章于 2022-08-12 13:54:47 发布

淡い哀调

最新推荐文章于 2022-08-12 13:54:47 发布

阅读量111

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44880056/article/details/105156620

版权

常用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>

淡い哀调

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用css样式整理

常用css样式整理1. css 文本显示一行，超出显示…//一行width:100px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all; //两行当文本所在的盒子太高时，注意设置line-height,//否则肯能会出现第三行显示一半的情况width:10...
复制链接

扫一扫