CSS3 -- API学习 (渐变)

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

原创最新推荐文章于 2020-04-20 14:48:51 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Web #CSS

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在CSS中使用线性渐变和径向渐变来创建动态且丰富的背景效果。通过具体示例，展示了不同方向的线性渐变应用，并简要提及了径向渐变的设置方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

线性渐变（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>