首页 > 其他分享 >无涯教程-CSS3 - 渐变属性(Gradients)

无涯教程-CSS3 - 渐变属性(Gradients)

时间:2024-01-24 14:34:06浏览次数:33  
标签:CSS3 blue linear gradient 无涯 green background Gradients red

渐变显示两种或更多种颜色的组合,如下所示-

线性渐变

线性渐变用于以线性格式(如从上到下)排列两种或多种颜色。

Top to bottom (从上到下)

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id="grad1"></div>
   </body>
</html> 

它将产生以下输出-

Left to right (从左到右)

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id="grad1"></div>
   </body>
</html> 

它将产生以下输出-

Diagonal (对角线渐变)  -  对角线从左上方和右上方的按钮开始。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id="grad1"></div>
   </body>
</html> 

它将产生以下输出-

Multi color (多种颜色渐变)

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>

   <body>
      <div id="grad2"></div>
   </body>
</html> 

它将产生以下输出-

CSS3径向渐变

径向渐变出现在中心。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>

   <body>
      <div id="grad1"></div>
   </body>
</html> 

它将产生以下输出-

CSS3重复径向渐变

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>

   <body>
      <div id="grad1"></div>
   </body>
</html> 

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css3-gradients.html

标签:CSS3,blue,linear,gradient,无涯,green,background,Gradients,red
From: https://blog.51cto.com/u_14033984/9395734

相关文章

  • 无涯教程-CSS3 - 颜色属性(Color)
    CSS3支持以下其他颜色属性-RGBA颜色HSL颜色HSLA颜色Opacity透明RGBA代表RedGreenBlueAlpha。它是CSS2的扩展,Alpha指定颜色的透明度,参数是0.0到1.0之间的数字。RGBA的示例语法如下所示-#d1{background-color:rgba(255,0,0,0.5);}#d2{background-colo......
  • 无涯教程-CSS3 - boarder-image属性
    CSSBorderimage属性用于向某些元素添加图像边界。边界图像的示例语法如下-#borderimg{border:10pxsolidtransparent;padding:15px;}最常用的值如下所示-Sr.No.Value&Remark1border-image-source用于设置图像路径2border-image-slice用于切片边......
  • 无涯教程-CSS3 - border-radius属性
    CSS3圆角用于通过使用border-radius 属性为正文或文本添加特殊的彩色圆角,语法如下-#rcorners7{border-radius:60px/15px;background:#FF0000;padding:20px;width:200px;height:150px;}下表显示了圆角的可能值,如下所示:Sr.No.Value&Remark1......
  • 无涯教程-CSS - 文字效果
    您可以使用CSS过滤器将特殊效果添加到文本,图像和网页的其他方面,而无需使用图像或其他图形。AlphaChannelAlpha通道滤镜会更改对象的透明度,从而使其融合到背景中,以下参数可以在此过滤器中使用-Sr.No.Parameter&Remark1opacity透明度。0是完全透明的,100是完全不透明的......
  • 无涯教程-CSS - @规则
    本章将涵盖以下重要的@规则-@import    : 将另一个样式导入到当前样式表中。@charset   : 样式使用的字符集。@font-face  : 用于详尽地描述文档中使用的字体。!important  : 指示用户定义的规则应优先。注意-还有其他@规则,无涯教程将在......
  • 无涯教程-CSS - 伪元素
    CSS伪元素用于向某些选项添加特殊效果,伪元素的简单语法如下-selector:pseudo-element{property:value}CSS类也可以与伪元素一起使用-selector.class:pseudo-element{property:value}最常用的伪元素如下-Sr.No.Value&Remark1:first-linep:first-line  选择每......
  • 无涯教程-CSS - 伪类
    CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-selector:pseudo-class{property:value}CSS类也可以与伪类一起使用-selector.class:pseudo-class{property:value}最常用的伪类如下-Sr.No.Value&Remark1:linka:link 选择所有未访问链接2:visi......
  • 无涯教程-CSS - 图层(Layers)
     CSSlayers指的是将z-index属性应用于彼此重叠的元素。z-index属性与position属性一起使用以创建图层效果。您可以指定哪个元素应该放在顶部,哪个元素应该放在底部。<html><head></head><body><divstyle="background-color:red;width:300......
  • 无涯教程-CSS - 尺寸(Dimension)
    无涯教程具有以下属性,可让您控制盒子的尺寸。height      :属性用于设置盒子的高度。width      :属性用于设置盒子的宽度。line-height  :属性用于设置一行文本的高度。max-height :属性用于设置盒子可以达到的最大高度。min-height ......
  • 无涯教程-CSS - 轮廓(Outlines)
    轮廓与边框非常相似,但是也没有什么主要区别-轮廓不占用空间。轮廓不必一定是矩形的。您可以使用CSS设置以下大纲属性。outline-width   : 属性用于设置轮廓的宽度。ouylinr-style    : 属性用于设置轮廓的线条样式。outline-color    : 属......