请大神讲解一下这段css的意思

问题描述

问 题

{
    background: -webkit-radial-gradient(0% 100%, ellipse cover,   rgba(111, 111, 111, 0.25) 20%, rgba(50, 138, 255, 0.71) 50%, rgba(61, 80, 213, 0.54) 80%),
     linear-gradient(to bottom, rgba(0, 119, 255, 1) 0%, rgba(128, 126, 157, 1) 100%),
     linear-gradient(135deg, #0D49CB 0%, rgba(4, 125, 213, 1) 100%);
}

解决方案

整理一下CSS格式吧

{
    background: -webkit-radial-gradient(0% 100%, ellipse cover,   rgba(111, 111, 111, 0.25) 20%, rgba(50, 138, 255, 0.71) 50%, rgba(61, 80, 213, 0.54) 80%),
     linear-gradient(to bottom, rgba(0, 119, 255, 1) 0%, rgba(128, 126, 157, 1) 100%),
     linear-gradient(135deg, #0D49CB 0%, rgba(4, 125, 213, 1) 100%);
}

我们可以分开看,很清晰,生成3个图片.
前者不支持我们就换一张的意思.

第一张

-webkit-radial-gradient(0% 100%, ellipse cover,   rgba(111, 111, 111, 0.25) 20%, rgba(50, 138, 255, 0.71) 50%, rgba(61, 80, 213, 0.54) 80%)

我们称为径向渐变,其实就是由中心点,边缘形状,位置和色值结束点定义.
需要说明的就是前两个参数,后面就是三个色值结束点(color stops)表示颜色和位置.
参数一:0% 100%,为位置,其实就是background-position
参数二:ellipse cover,设置形状为椭圆,cover等同于farthest-corner常量,意思是:渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

相关的MDN传送门:https://developer.mozilla.org...

效果图如上

第二张

linear-gradient(to bottom, rgba(0, 119, 255, 1) 0%, rgba(128, 126, 157, 1) 100%)

线性渐变,也就不赘述了

参数一:to bottom,向下渐变咯

相关的MDN传送门:https://developer.mozilla.org...

效果图如上

第三张

   linear-gradient(135deg, #0D49CB 0%, rgba(4, 125, 213, 1) 100%);

不必多言,大家自己体会

相关的MDN传送门:如第二张

效果图如上

这篇关于请大神讲解一下这段css的意思的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！