线性渐变( linear-gradient )

background-image: 
linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 );

四个方向的组合-八个方向
top, right, bottom, left

角度
90deg

径向渐变( radial-gradient )

background-image: 
radial-gradient(大小 形状 at 方向, 开始颜色, 中间颜色1, 中间颜色2, ..., 结束颜色 );

大小 : 圆半径一个值 或者 椭圆半长轴和半短轴两个值
百分比 / 像素

形状

circle
ellipse

方向
百分比 / 像素

closest-side/closest-corner/farthest-side/farthest-corner

background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);

总结

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

猜你喜欢

• 用纯CSS怎么实现烟雾效果，方法是什么

  模糊颗粒感的烟雾效果用 纯CSS 也能实现，下面本篇文章就来一步步看看使用纯CSS要怎么实现烟雾效果，希望对大家有所帮助！

• 隐藏CSS滚动条不可见有几种方法

  css让滚动轴看不见方法：1、利用“::-webkit-scrollbar”选择器选中滚动轴对象，2、利用display属性将滚动轴样式设置为不可见即可，语法为“::-webkit-scrollbar{display:none;}”。

• 在CSS中outline方法怎么用，有什么事项要注意

  css中outline方法的使用：1、如果只需要两层边框，可以选择先设置一层常规边框，再加上outline(描边)属性来生成外层边框。2、outline-offset属性可以控制边缘和元素边缘之间的间距，该属性可以接受负值。

• CSS浮动导致网页的布局紊乱的问题怎样解决？

  这篇文章主要给大家分享的是关于CSS浮动导致网页的布局紊乱的问题的解决方法，一些朋友遇到在子盒子设置浮动之后，页面布局出现了紊乱的问题。我们想要解决这个问题，有几种方法，下面小编就给大家来一一介绍一下。

• CSS中使用z-index不起作用怎么办

  第一点，和我的相符，但我把它改成了position:absolute，问题依然存在。第二点、第三点和我的情况不符。接着就是一层一层地追，发现把这个层（A）比较高一级的父层（B）加上position:relative;z-index:100;就好了，原来是B层比与相邻的层（C）低了，导致B层里的任何一层无论怎么设z-index，也高不过与B层相邻的那个C层。第 ...