CSS实验:linear-gradient 实现「四角边框」和「 字体渐变」

background: linear-gradient(red, yellow, blue);

background: linear-gradient(red 0%, yellow 50%, blue 100%);

background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);

background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);

to right代表渐变偏移角度,to right (相当于90deg)

1、四角边框的背景

这里我们使用linear-gradient方式实现,结合background一些其他属性,可以更加灵活。下面的方式是用linear-gradient画线的方式,画上下两条边,然后通过background-size的方式截取边角上的部分,组合形成的。

复制代码
width: 200px;
height: 200px;
padding: 10px;
background-origin: content-box;
background-color: #0e294c;
background-image: 
	linear-gradient(#4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%),
	linear-gradient(90deg, #4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%),
	linear-gradient(#4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%),
	linear-gradient(90deg, #4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%);
background-repeat: no-repeat;
background-position: top left, top left, bottom right, bottom right;
background-size: 10px 100%, 100% 10px;
相关推荐
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
Jokerator4 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
Savior`L6 小时前
CSS知识复习4
前端·css
我要让全世界知道我很低调7 小时前
记一次 Vite 下的白屏优化
前端·css
again43210 小时前
css生效规则
css
Esun_R10 小时前
使用CSS选择器选择列表中最后一个子元素的几种情况
css
iphone10810 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
海底火旺11 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
Allen Bright13 小时前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css