CSS渐变属性的特效,你学会了吗?

网站建设4年前发布
38 0 0
20230307002659b212f4417def38b2bfc249df3a40a1aff87494995,页面中如果有两种或多种指定颜色之间的平滑过渡的渐变效果,会使得我们的视觉效果瞬间提升几个档次,在CSS3中有提供的多个渐变方式属性就能让我们轻松实现这样的渐变效果。,目前CSS渐变属性有六个,分别为:linear-gradient(线性渐变),repeating-linear-gradient(重复线性渐变),radial-gradient(径向渐变),repeating-radial-gradient(重复径向渐变),conic-gradient(锥形渐变),repeating-conic-gradient(重复锥形渐变); CSS渐变属性作用是从一种颜色平滑渐变到另一种颜色的图像,那么background-imageborder-image属性都可以用渐变作为图片内容。 下面,我们就分别来看看这几个属性的效果,线性渐变以直线的方式,可向左、向右、向上、向下、对角方向延伸,使用频率很高。要创建线性渐变,需要指定两种及以上的颜值和方向,如果未指定方向,默认为上到下渐变。
使用语法:,2023030700291285c4fa3606ff98f1c3b0911e5cc891075de2bf713,默认从上到下。,202303070029124394de332a5d8789795026b1a869a2e2d9d9ad735,指定方向从左上角到右下角。,2023030700270078c5d2b77e807111acb508675772cc0908babb434,指定方向从左上角到右下角,设置多种渐变颜色。,
,20230307002914d75a6e269e592272138663399bad50a05eb851651,指定方向从左上角到右下角,设置多种渐变颜色及颜色作用位置。,repeating-linear-gradient用得可能比较少,它是基于linear-gradient进行重复平铺操作。,20230307002703440ed7446f1b5ce232666835c41b354aea2f70820,前面都是渐变背景,我们再来看看渐变边框是什么效果。,20230307002703a92fc54556c488c9b1d299d7e40a94c24d3085338,径向渐变以由中心点由或者椭圆向外扩散,使用语法。,20230307002914c40d4ee1791480756a17210d62fc14da322acb292,20230307140706c7d3b49626b948a6ef9915627369cefb4c8a62608,一般情况下,用conic-gradient的场景比较少,但我们也可以基本了解一下。其基本语法:,20230307002706e1953137192e597687e682ad99bca9b8a13439993,2023030700291577a6f85795a83c46fe07455f7278b4772e9d7b967,20230307002707d917eb294f4e00a3d8f076b5ec9830bc4acc5c466
© 版权声明

相关文章