css中怎么实现背景颜色线性渐变和径向渐变效果

蜗牛 互联网技术资讯 2022-04-28 23 0

本篇内容介绍了“css中怎么实现背景颜色线性渐变和径向渐变效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、线性渐变(linear-gradient)

实现线性渐变,至少需要定义两种颜色,这两种颜色就是你想平稳过渡的颜色,即:其中一种颜色为起点,另一种颜色为结束点。

语法:

background: linear-gradient(colorA,colorB)

colorA为起点颜色,colorB为结束点颜色。

还可以定义渐变的方向,是从上到下渐变,还是从左至右渐变,又或者是从左上角至右下角渐变(默认情况下是从上至下渐变的)。

语法:

background: linear-gradient(direction,colroA,colorB)

direction表示渐变的方向,直接写方向的起点即可,比如:渐变方向为从左至右,直接写left即可;渐变方向为从下至上,直接写bottom即可;渐变方向从左上角至右下角,书写为background: linear-gradient(left top,colorA,colorB)。

css线性渐变案例

举例:从左下角至右上角,从红色到蓝色的渐

代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   div{
    width: 400px;
    height: 200px;
    background: -webkit-linear-gradient(left bottom,red,blue);
    background: -o-linear-gradient(left bottom,red,blue);
    background: -moz-linear-gradient(left bottom,red,blue);
    background: linear-gradient(left bottom,red,blue);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

二、径向渐变(radial-gradient)

CSS3径向渐变是圆形或椭圆形的渐变。颜色不再沿着一条直线轴变化,而是从一个起点向所有方向发射。它比线性渐变更复杂。

可以定义它的中心(默认渐变是中心是center)、形状(原型或者椭圆形)、大小等。

语法:background: radial-gradient(position,shape,size,start-color,last-color)

position
<length>:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left:设置左边为径向渐变圆心的横坐标值。
center:设置中间为径向渐变圆心的横坐标值或纵坐标。
right:设置右边为径向渐变圆心的横坐标值。
top:设置顶部为径向渐变圆心的纵标值。
bottom:设置底部为径向渐变圆心的纵标值。

shape
可以是值 circle 或 ellipse。circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

size
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;默认值

css径向渐变案例

举例:从60%,55%的位置开始渐变,指定径向渐变的半径长度为从圆心到离圆心最近的边,从内向外渐变颜色为blue,green,yellow,black

代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   div{
    width: 400px;
    height: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
     background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

“css中怎么实现背景颜色线性渐变和径向渐变效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论