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;
相关推荐
~无忧花开~4 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
嬉皮客1 小时前
TailwindCSS 初探
前端·css
小张成长计划..3 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
西西学代码3 小时前
Flutter---音效模式选择器
前端·html
键盘不能没有CV键9 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
云知谷12 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'12 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'12 小时前
css `dorp-shadow`
前端·css
昔人'17 小时前
`tanslate=“no“`避免使用 HTML 中的翻译属性自动翻译品牌名称等
html
执沐18 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html