css3渐变

Bertha 。 2021-09-15 16:20 414阅读 0赞

从上自下

background: -webkit-linear-gradient(red, blue); /\* Safari 5.1 - 6.0 \*/

background: -o-linear-gradient(red, blue); /\* Opera 11.1 - 12.0 \*/  
    background: -moz-linear-gradient(red, blue); /\* Firefox 3.6 - 15 \*/

background: linear-gradient(red, blue); /\* 标准的语法（必须放在最后） \*/

从左自右

height: 200px;  
    background: -webkit-linear-gradient(left, red , blue); /\* Safari 5.1 - 6.0 \*/  
    background: -o-linear-gradient(right, red, blue); /\* Opera 11.1 - 12.0 \*/  
    background: -moz-linear-gradient(right, red, blue); /\* Firefox 3.6 - 15 \*/

background: linear-gradient(to right, red , blue); /\* 标准的语法（必须放在最后） \*

对角

height: 200px;

background: -webkit-linear-gradient(left top, red , blue); /\* Safari 5.1 - 6.0 \*/  
    background: -o-linear-gradient(bottom right, red, blue); /\* Opera 11.1 - 12.0 \*/  
    background: -moz-linear-gradient(bottom right, red, blue); /\* Firefox 3.6 - 15 \*/

background: linear-gradient(to bottom right, red , blue); /\* 标准的语法（必须放在最后）

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

透明度

\#grad1 \{  
    height: 200px;  
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /\* Safari 5.1 - 6.0 \*/  
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /\* Opera 11.1 - 12.0 \*/  
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /\* Firefox 3.6 - 15 \*/  
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /\* 标准的语法（必须放在最后） \*/  
\}  
</style>  
</head>  
<body>  
  
  
<h3>线性渐变 - 透明度</h3>  
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>  
  
  
<div id="grad1"></div>