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;
相关推荐
Pu_Nine_91 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
weixin_ab4 小时前
【HTML分离术】
前端·html
struggle20257 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
朝阳399 小时前
CSS【实战】可编辑元素实现 placeholder -- contenteditable=“true“
css
咚咚咚小柒11 小时前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang11 小时前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
Hello123网站12 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
fox_14 小时前
CSS3:水平垂直居中的 N 种实现方法
css
超能996要躺平14 小时前
用三行 CSS 实现任意多列等分布局:深入掌握 Grid 的 repeat() 与 gap
前端·css
星光一影14 小时前
HIS系统天花板,十大核心模块,门诊/住院/医保全流程打通,医院数字化转型首选
java·spring boot·后端·sql·elementui·html·scss