前端学习（CSS3 二）——背景、渐变、文本

最新推荐文章于 2024-03-31 14:35:54 发布

这名没人用吧

最新推荐文章于 2024-03-31 14:35:54 发布

阅读量208

点赞数 1

分类专栏： css基础知识文章标签： css3

本文链接：https://blog.csdn.net/weixin_43866830/article/details/115187073

版权

本文详细介绍了CSS3中的背景新特性，包括background-clip、background-origin、background-size和background-image的用法。此外，还探讨了线性渐变、径向渐变以及文本阴影、文本溢出和单词换行规则的实现和应用。通过实例展示了各种属性的效果，是前端开发者学习CSS3的实用教程。

摘要由CSDN通过智能技术生成

一、CSS3背景新增内容

1.background-clip

background-clip：背景的绘制区域。
语法：

background-clip: border-box | padding-box | content-box;

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.test{
   
			width: 300px;
			height: 100px;
			padding: 50px;
			border: 20px dashed red;
			background-color: #00FFFF;
			background-clip: border-box;/*border-box也是默认值*/
		}
	</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

结果：
在这里插入图片描述
当值为padding-box时：

<style type="text/css">
	.test{
   
		width: 300px;
		height: 100px;
		padding: 50px;
		border: 20px dashed red;
		background-color: #00FFFF;
		background-clip: padding-box;
	}
</style>

在这里插入图片描述
当值为content-box时：

<style type="text/css">
	.test{
   
		width: 300px;
		height: 100px;
		padding: 50px;
		border: 20px dashed red;
		background-color: #00FFFF;
		background-clip: content-box;
	}
</style>

结果：在这里插入图片描述

2.background-origin

background-origin：背景图片的定位区域。
语法同background-clip一样，定位默认值是padding-box，示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.test{
   
			width: 300px;
			height: 100px;
			padding: 50px;
			border: 20px dashed red;
			background-color: #00FFFF;
			background-image: url(../img/csdn.png);
			background-repeat: no-repeat;
			/* background-origin: padding-box; */
		}
	</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

结果：
在这里插入图片描述
当值为border-box时：

<style type="text/css">
	.test{
   
		width: 300px;
		height: 100px;
		padding: 50px;
		border: 20px dashed red;
		background-color: #00FFFF;
		background-image: url(../img/csdn.png);
		background-repeat: no-repeat;
		background-origin: border-box;
	}
</style>

结果：在这里插入图片描述
当值为content-box时：

<style type

最低0.47元/天解锁文章

这名没人用吧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端学习（CSS3 二）——背景、渐变、文本

前端学习之CSS3一、CSS3背景新增内容1.background-clip2.background-origin3.background-size4.background-image一、CSS3背景新增内容1.background-clip background-clip：背景的绘制区域。语法：background-clip: border-box | padding-box | content-box;示例：<!DOCTYPE html><html lang="zh
复制链接

扫一扫