css3文本新增样式

最新推荐文章于 2023-01-06 23:50:25 发布

你真好看l

最新推荐文章于 2023-01-06 23:50:25 发布

阅读量138

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103243423

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.opacity
opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。
因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。

OCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#opa{
				height: 90px;
				width: 90px;
				color: #808080;
				background-color: #000000;
				opacity: 0.5;
			} 
		</style>
	</head>
	<body>
		<div id="opa">
			123
		</div>
	</body>
</html>

在这里插入图片描述 2.rgba
color: rgba(红，绿，蓝，不透明度)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 100px;
				height: 100px;
				background-color: rgba(0,0,0,0.5);
				color: red;
				text-align: center;
				line-height: 100px;
				
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈哈哈
		</div>
	</body>
</html>

在这里插入图片描述
3.文字阴影
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。(多个阴影时，第一个在最上边)
每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。 Note:
如果想确保跨浏览器的一致性，请明确地指定一种颜色
必选。这些长度值指定阴影相对文字的偏移量。指定水平偏移量，若是负值则阴影位于文字左边。

指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了
则会产生模糊效果)。可用单位请查看。可选。这是
值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-size: 100px;
				text-shadow: 5px 8px 2px #0000FF,10px 16px 2px yellow;
			}
			
		</style>
	</head>
	<body>
		<h1>hhh哈哈哈</h1>
	</body>
</html>

在这里插入图片描述浮雕文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-size: 100px;
				color: white;
				text-shadow: 1px 1px 10px black;
			}
		</style>
	</head>
	<body>
		<h1>hhh哈哈哈</h1>
	</body>
</html>

在这里插入图片描述文字模糊（鼠标悬停模糊）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-size: 100px;
				color: black;
				transition: 1s;
			}
			h1:hover{
				color: rgba(0,0,0,0);
				text-shadow: 0 0 100px black;
			}
		</style>
	</head>
	<body>
		<h1>hhh哈哈哈</h1>
	</body>
</html>

在这里插入图片描述
模糊背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				height: 200px;
				background-color: rgba(0,0,0,0.5);
				position: relative;
			}
			img{
				margin: 50px;
			}
			#wrap #bg{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: url(imgs/head2.png) no-repeat;
				z-index: -1;
				filter: blur(10px);  /*让整个元素模糊*/
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<img src="imgs/head2.png" width="100px" height="100px" >
			<div id="bg">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述 4文字描边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!---
		必须加前缀
		-webkit-text-stroke
		
		
		-->
		<style type="text/css">
			
			h1{
				font-size: 50px;
				color: white;
				-webkit-text-stroke: 4px red;
			}
		</style>
	</head>
	<body>
		<h1>hhh哈哈哈</h1>
	</body>
</html>

在这里插入图片描述 5文字排版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		ltr
		默认属性。可设置文本和其他元素的默认方向是从左到右。
		rtl
		可设置文本和其他元素的默认方向是从右到左。
		-->
		<style type="text/css">
			#test{
				height: 100px;
				width: 100px;
				border: 1px solid;
				direction: rtl;
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈呵
		</div>
	</body>
</html>

在这里插入图片描述 6溢出显示省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				border: 1px solid;
				
				/*下面三条缺一不可，还有一个隐含的属性display为block*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div id="test">
			CSS unicode-bidi 属性，和 direction 属性，决定如何处理文档中的双书写方向文本（bidirectional text）。比如，如果一块内容同时包含有从左到右书写和从右到左书写的文本，那么用户代理（the user-agent）会使用复杂的 Unicode 算法来决定如何显示文本。
			unicode-bidi 属性会覆盖此算法，允许开发人员控制文本嵌入（text embedding）。
		</div>
	</body>
</html>

在这里插入图片描述

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3文本新增样式

1.opacityopacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。使用opacity属性，当属性值不...
复制链接

扫一扫