【css】radial-gradient()

最新推荐文章于 2024-05-08 16:09:38 发布

richest_qi

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量432

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/108104874

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

- - - radial-gradient()
    - 波点

radial-gradient()

径向渐进

渐进起点
始终是元素的中心点
渐进终点
有四种，
- farthest-corner
  渐进终点在离元素中心点最远的角上
- farthest-side
  渐进终点在离元素中心最远的边上
- closest-corner
  渐进终点在离元素最近的边上
- closest-side
  渐进终点在离元素最近的角上

<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
    margin: 20px;
}
/*
.box{
    background-color: lightskyblue;
    background-image: radial-gradient(orange 50px,transparent 0);
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: radial-gradient(orange 50%,transparent 0);
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: radial-gradient(closest-side, orange 50px,transparent 0);    
}
*/

.box{
    background-color: lightskyblue;
    background-image: radial-gradient(closest-side, orange 50%,transparent 0);    
}

在这里插入图片描述

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

 div{
     margin: 5px;
 }
 .box1{
     width: 100px;
     height: 100px;
     border: 1px solid lightgray;
     background-image: radial-gradient(lightskyblue 50px,transparent 0);
 }
 .box2{
     width: 100px;
     height: 100px;
     border: 1px solid lightgray;
     background-image: radial-gradient(circle,lightskyblue 50px,transparent 0);        
 }
 .box3{
     width: 200px;
     height: 100px;
     border: 1px solid lightgray;
     background-image: radial-gradient(lightskyblue 50px,transparent 0);
 }
 .box4{
     width: 200px;
     height: 100px;
     border: 1px solid lightgray;
     background-image: radial-gradient(ellipse,lightskyblue 50px,transparent 0);
 }
 .box5{
     width: 200px;
     height: 100px;
     border: 1px solid lightgray;
     background-image: radial-gradient(circle,lightskyblue 50px,transparent 0);
 }

在这里插入图片描述

波点

<body>
    <div class="box"></div>
</body>

.box{
    /* 
    width: 100px;
    height: 100px;
    background-color: lightskyblue; 
    */
    /* 
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    background-image: radial-gradient(orange 50px, transparent 0); 
    */
    /* 
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    background-image: radial-gradient(orange 50px, transparent 0);
    background-position: 50px 50px;
    background-repeat: no-repeat; 
    */
    /* 
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    background-image: radial-gradient(orange 50px, transparent 0);
    background-position: 50px 50px;
    background-repeat: repeat; 
    */
    /*
    background-color:lightskyblue;
    background-image:radial-gradient(orange 50px,transparent 0);
    background-position: 50px 50px;
    background-repeat: repeat;
    background-size: 100px 100px;
    width: 200px;
    height: 200px;  
    */
    /* 
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 25px 25px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px; 
    */
    /* 
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 25px 25px;
    background-repeat: repeat;
    width: 50px;
    height: 50px; 
    */
    /* 
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 25px 25px;
    background-repeat: repeat;
    background-size: 50px 50px;
    width: 200px;
    height: 200px; 
    */
    /* 
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 50px 50px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px; 
    */
    /* 
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 50px 50px;
    background-repeat: repeat;
    width: 50px;
    height: 50px; 
    */
    background-color:lightskyblue;
    background-image:radial-gradient(orange 10px,transparent 0);
    background-position: 50px 50px;
    background-repeat: repeat;
    background-size: 50px 50px;
    width: 200px;
    height: 200px;  
}

在这里插入图片描述

richest_qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【css】radial-gradient()

文章目录radial-gradient()波点radial-gradient()径向渐进渐进起点始终是元素的中心点渐进终点有四种，farthest-corner渐进终点在离元素中心点最远的角上farthest-side渐进终点在离元素中心最远的边上closest-corner渐进终点在离元素最近的边上closest-side渐进终点在离元素最近的角上<body> <div class="box"></div></bo
复制链接

扫一扫

专栏目录