本文主要是介绍CSS3起步 06-------边框图片，背景以及渐变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
边框图片
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>
这篇关于CSS3起步 06-------边框图片，背景以及渐变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
