CSS3起步 06-------边框图片，背景以及渐变

最新推荐文章于 2024-04-09 17:10:53 发布

燃情雪

最新推荐文章于 2024-04-09 17:10:53 发布

阅读量147

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89162807

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

边框图片
01，border-image-source导入资源为边框，默认四个角100%
02，border-image-slice用于图片的切片分布，上右下左
03，border-image-repeat用于背景图片的平铺
04，border-image-width默认为border-width
05, border-image-outset边框不变但是是往外扩
着重点：border-image-slice：a,b,c,d fill;【上边距开始，右边距开始，下边距开始，左边距开始，填充中心域】
如图
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框九宫格</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
			}
			#test {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				border:30px solid;
				border-image-source: url(img/九宫格.jpg);
				border-image-slice: 33.33333333% fill;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
</html>

背景
01，background-color: pink;
02，background-image: ;//是从padding开始渲染，从border box开始剪切
03，background-position: ;
04，background-size;
着重点：background-position调整背景位置，位置定义x / y坐标。

渐变
01，linear-gradient线性渐变
02，repeating-linear-gradient重复渐变部分
03，radial-gradient径向渐变
04，text-align只针对文本和行内块
着重点：repeating-linear-gradient只针对渐变部分，且颜色后面的px值为渐变大小

背景And渐变Demo
demo1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发廊灯</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#wrap {
				width: 50px;
				height: 200px;
				margin: 20px auto;
				border: 2px solid black;
				overflow: hidden;
			}
			#inner {
				width: 50px;
				height: 400px;
				/* 上面的px值其实是渐变长度 */
				background: repeating-linear-gradient(135deg, black, black 10px, white 10px, white 20px);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">	
			</div>
		</div>
	</body>
	<script>
		var inner = document.querySelector('#inner');
		let count = 0;
		setInterval(function() {
			count++;
			if(count == 200) {
				count = 0;
			}
			inner.style.marginTop = -count+'px';
		},1000/60);
	</script>
</html>

demo2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>光斑文字</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
				width: 100%;
				background-color: rgb(0, 0, 0);
				text-align: center;
			}
			h1 {
				color: rgba(255, 255, 255, .3);
				display: inline-block;
				margin-top: 20px;
				background: linear-gradient(140deg, rgba(255, 255, 255, 0) 20px, rgba(25, 255, 255, 1) 60px, rgba(25, 255, 255, 1) 40px, rgba(255, 255, 255, 0) 100px);
				background-repeat: no-repeat;
				-webkit-background-clip: text;
			}
		</style>
	</head>
	<body>
		<h1>buringSnow燃情雪</h1>
	</body>
 	<script>
		var h1 = document.querySelector('h1');
		// 为了从头开始
		var backgroundPosition = -160;
		setInterval(function() {
			backgroundPosition+=10;
			if(backgroundPosition >= h1.offsetWidth+500) {
				backgroundPosition = -160;
			}
			h1.style.backgroundPosition = backgroundPosition+'px';
		},30);
	</script>
</html>

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3起步 06-------边框图片，背景以及渐变

边框图片01，border-image-source导入资源为边框，默认四个角100%02，border-image-slice用于图片的切片分布，上右下左03，border-image-repeat用于背景图片的平铺04，border-image-width默认为border-width05, border-image-outset边框不变但是是往外扩着重点：border-image...
复制链接

扫一扫

专栏目录