渐变

了解

渐变:可以显示两种或多种指定颜色之间的平滑过渡。

渐变类型:

线性渐变(向下/向上/向左/向右/对角线)

语法: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

posted @   丫丫learning  阅读(349)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示