渐变
了解
渐变:可以显示两种或多种指定颜色之间的平滑过渡。
渐变类型:
线性渐变(向下/向上/向左/向右/对角线)
语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
方向: 1.to + 方位名词 left right top bottom(to 终点位置属性)
2.度数deg:可以理解为颜色从原点到度数的方向过渡
background-image: linear-gradient(to right , red, green); background-image: linear-gradient(to top right , red, green); background-image: linear-gradient(45deg , red, rgba(83, 132, 83, .5));
径向渐变(由其中心定义)
语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地,shape 为椭圆形,size 为最远角,position 为中心。
background-image: radial-gradient(circle, pink, skyblue,yellow);
属性名 | 描述及取值 |
---|---|
shape | 确定圆的类型: ellipse(默认):指定椭圆形的径向渐变 cricle:指定圆形的径向渐变 |
size | 定义渐变的大小,可能值: farthest-conner(默认):指定径向渐变的半径长度为从圆心到离心最远的角 closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边 closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边 |
position | 定义渐变的位置,可能值: center(默认):设置中间为径向渐变圆心的纵坐标值。 top:设置顶部为径向渐变圆心的纵坐标值。 bottom:设置底部为径向渐变圆心的纵坐标值。 |
start-color, …, last-color | 用于指定渐变的起止颜色。 |
表格原文链接:https://blog.csdn.net/weixin_44296929/article/details/103031616
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性