径向渐变

最新推荐文章于 2022-10-19 11:20:29 发布

我的哥哥呦

最新推荐文章于 2022-10-19 11:20:29 发布

阅读量615

点赞数

分类专栏： H5C3 文章标签：径向渐变

本文链接：https://blog.csdn.net/qq_20497071/article/details/97488074

版权

H5C3 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            /*添加径向渐变：产生也是图像*/
            /*background: radial-gradient(red,blue);*/
            /*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
            形状shape:circle:产生正方形的渐变色   ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
            at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
            大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
            /*background: radial-gradient(circle,red,blue);*/
            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
            /*background: radial-gradient(at left top,red,blue);*/
            
            /*设置颜色的位置*/
            background: radial-gradient(at left top,red 20%,blue 30%,green 50%);
        }
    </style>
<body>
<div></div>
</body>
</html>

我的哥哥呦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
径向渐变

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; he...
复制链接

扫一扫

专栏目录