【Html】09-径向渐变补充

最新推荐文章于 2023-04-06 20:31:52 发布

郑SaScha

最新推荐文章于 2023-04-06 20:31:52 发布

阅读量98

点赞数

分类专栏： Html+CSS入门学习记录

本文链接：https://blog.csdn.net/m0_53493562/article/details/117815487

版权

Html+CSS入门学习记录专栏收录该内容

24 篇文章 0 订阅

订阅专栏

径向渐变-size

半径长短

closest-side：圆心到最近的边的距离开始渐变过渡；

<style>
        div{
            width: 200px;
            height: 200px;
            background: 
            #fff radial-gradient(closest-side circle at 50px 50px,#cf9,#000 );
        }
</style>

效果预览：

farthest-side：圆心到最远的边的距离开始渐变过渡；

<style>
        div{
            width: 200px;
            height: 200px;
            background: 
            #fff radial-gradient(farthest-side circle at 50px 50px,#cf9,#000 );
        }
</style>

效果预览

closest-corner：圆心到最近的角的距离开始渐变过渡；

<style>
        div{
            width: 200px;
            height: 200px;
            background: 
            #fff radial-gradient(closest-corner circle at 50px 50px,#cf9,#000 );
            margin: 200px auto;
        }
</style>

效果预览：

farthest-corner：圆心到最远的角的距离开始渐变过渡；

<style>
        div{
            width: 200px;
            height: 200px;
            background: 
            #fff radial-gradient(farthest-corner circle at 50px 50px,#cf9,#000 );
            margin: 200px auto;
        }
</style>

效果预览：

多张背景图

background:
			radial-gradient(color,color,color) position/size,
			radial-gradient(color,color,color) position/size,
			radial-gradient(color,color,color) position/size;