CSS3 -- API学习 (渐变)

最新推荐文章于 2020-04-20 14:48:51 发布

坤少的IT之路

最新推荐文章于 2020-04-20 14:48:51 发布

阅读量170

点赞数

分类专栏： CSS 文章标签： Web CSS

本文链接：https://blog.csdn.net/qq_39456689/article/details/89002535

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

一、线性渐变

background:linear-gradient(direct , color1 n%, color2 n% , color3 n%, color4 n%, color5 n%)

direct:(to right, to left ,to top ,to bottom ,top left , top bottom , bottom left , bottom right ,0~360deg)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div {
               border: 1px solid black;
               width: 100px;
               height: 100px;
               background: -webkit-linear-gradient(red, green,yellow); /* Safari 5.1 - 6.0 */
               background: -o-linear-gradient(red, green,yellow); /* Opera 11.1 - 12.0 */
               background: -moz-linear-gradient(red, green,yellow); /* Firefox 3.6 - 15 */
               background: linear-gradient(65deg,red 10%, green 20%,yellow 70%); /* 标准的语法 */
               }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

结果：

****使用透明度****

将color：rgb(ff,ff,ff,1);调节透明度就可以了

二、径向渐变

其他的和线性渐变一样，只有一个不一样，如下所示

坤少的IT之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 -- API学习 (渐变)

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义一、线性渐变background:linear-gradient(direct , color1 n%,color2n% ,color3 n%,color4 n%, color5 n%)direct:(to right, to ...
复制链接

扫一扫