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;
相关推荐
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
江湖伤心人12 小时前
工具分享--IP与域名提取工具
html
中微子12 小时前
CSS 的 position 你真的理解了吗?
前端·css
喝西瓜汁的兔叽Yan13 小时前
小效果--多行文本溢出出现省略号
前端·css
拾光拾趣录14 小时前
前端响应式布局:手把手实现智能PX转REM
前端·javascript·css
yk-ddm15 小时前
JavaScript实现文件下载完整方案
前端·javascript·html
归于尽16 小时前
从按钮 "跳帧" 到 3D 翻书:CSS 动画进阶的 "三级跳"
前端·css
gyeolhada16 小时前
Web: 基础知识、HTML、CSS、JavaScript(英文版--知识点学习/复习)
前端·javascript·css3·html5·web
明飞198716 小时前
CSS基础1.1
css3
归于尽18 小时前
别再纠结布局了!Flex 和 Grid 的 “神仙操作” 都在这
前端·css