HTML5之radial-gradient经向渐变

最新推荐文章于 2023-02-26 19:19:12 发布

liyu1059915776

最新推荐文章于 2023-02-26 19:19:12 发布

阅读量1k

点赞数

分类专栏： HTML5 经向渐变文章标签： HTML5 经向渐变

本文链接：https://blog.csdn.net/liyu1059915776/article/details/83384645

版权

HTML5 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

经向渐变

1 篇文章 0 订阅

订阅专栏

经向渐变：

<!DOCTYPE html>

<html>
<head>
   <meta charset="UTF-8">
   <title>HTML5之radial-gradient经向渐变</title>
   <meta name="keywords" content=""/>
   <meta name="description" content=""/>
   <style type="text/css">
       div {
           width: 300px;
           height: 200px;
           border: 1px solid #000;
           float: left;
           margin: 0 0 10px 10px;
       }
       /* 默认的样式 */
       .box1 {
           background-image: radial-gradient(red,yellow,blue);
       }
       /* 通过 position 控制圆心使用 at 与关键词 */
       .box2 {
           background-image: radial-gradient(at left top,red,yellow,blue);
       }
       /* 通过 position 控制圆心使用 at 与数值 */
       .box3 {
           background-image: radial-gradient(at 100px 100px,red,yellow,blue);
       }
       /* 通过 position 控制圆心使用 at 与一个值*/
       .box4 {
           background-image: radial-gradient(at 10px,red,yellow,blue);
       }
       /* 通过 shape 控制形状 */
       .box5 {
           background-image: radial-gradient(circle,red,yellow,blue);
       }
       /* 通过 shape 控制形状 */
       .box6 {
           background-image: radial-gradient(closest-side circle,red,yellow,blue);
       }
       /* 通过 shape 控制形状 */
       .box7 {
           background-image: radial-gradient(closest-corner circle at 100px 10px,red,yellow,blue);
       }
       /* 通过 shape 控制形状 */
       .box8 {
           background-image: radial-gradient(farthest-side circle at 10px 100px,red,yellow,blue);
       }
       /* 通过 shape 控制形状 */
       .box9 {
           background-image: radial-gradient(farthest-corner circle,red,yellow,blue);
       }
       .box10 {
           background: #655;
           background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
           -webkit-background-size: 30px 30px;
           background-size: 30px 30px;
           background-position: 0 0,15px 15px;
       }
   </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div>
   <div class="box5"></div>
   <div class="box6"></div>
   <div class="box7"></div>
   <div class="box8"></div>
   <div class="box9"></div>
   <div class="box10"></div>
</body>
</html>