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;
相关推荐
孩子 你要相信光36 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
从零开始学习人工智能2 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
小刘鸭地下城3 小时前
优雅表格设计:CSS 美化技巧详解
css
yddddddy3 小时前
html基本知识
前端·html
小刘鸭地下城4 小时前
网页深色模式完整实现:从响应式设计到系统主题联动
css
恶猫5 小时前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
Hilaku7 小时前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
Giant1007 小时前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
Sherry0078 小时前
【译】掌握 Flexbox 的终极指南:从烤肉串到鸡尾酒香肠的布局哲学
css·面试·flexbox
那一抹阳光多灿烂10 小时前
CSS 编码规范
前端·css