【CSS3新加属性】

最新推荐文章于 2024-07-10 18:14:09 发布

byte~

最新推荐文章于 2024-07-10 18:14:09 发布

阅读量533

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_45929209/article/details/121683085

版权

CSS3新加属性

文字阴影（text-shadow）
文字溢出（text-overflow）
RGBA[^1]
SHL[^2]
opacity属性[^3]

文字阴影（text-shadow）

简单阴影

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p {
				text-align: center;
				font: bold 130px "微软雅黑";
				color: #999;
				text-shadow: -0.1em -0.1em #333;
			}
		</style>
	</head>
	<body>
		<p>HTML5+CSS3</p>
	</body>
</html>

模糊阴影

代码如下（示例）：

text-shadow: 0.1em 0.1em 0.2em #333,
		-0.1em -0.1em 0.2em #333;

相对简单阴影，模糊阴影需要加一个模糊的半径，如代码里的0.2em

多色阴影

text-shadow: 0 0 4px white,
			 0 -5px 4px #FF3,
			 2px -10px 6px #FD3,
			 -2px -15px 11px #F80,
			 2px -25px 18px #F20;

文字溢出（text-overflow）

文字过长时，则会产生溢出，因此截取部分来显示
三个可选择的参数：clip（不显示省略信号），ellipsis（他会显示省略的信号），ellipsis-word（会显示省略的信号，并且是按照整字来截取）
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ellipsis {
				width: 300px;
				font-size: 20px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p class="ellipsis">发生看到房价阿喀琉斯的飞机啊四道口附近啊士大夫看见啊四道口附近</p>
	</body>
</html>

RGBA¹

SHL²

opacity属性³

提示：调颜色一般不是我们的工作哦~

形变

RGB表示颜色 A表示透明度 ↩︎
S:饱和度 H:色调 L:亮度 ↩︎
同样也是一种新增的一种调颜色的方法 ↩︎

byte~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3新加属性】

CSS3新加属性文字阴影（text-shadow）简单阴影模糊阴影多色阴影文字溢出（text-overflow）RGBA[^1]SHL[^2]opacity属性[^3]文字阴影（text-shadow）简单阴影代码如下（示例）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&
复制链接

扫一扫