html如何设置按钮背景为透明,css 设置按钮（背景色渐变、背景色透明）

> 有时候我们的样式需要一点渐变的效果~比如下面的按钮


------------

### 1、css 设置按钮 背景色渐变

```css

#1.线性渐变

linear-gradient(a, color...)

#2.重复的线性渐变

repeating-linear-gradient

#3.径向渐变

radial-gradient

#4.重复的径向渐变

repeating-radial-gradient

```

#### 1.1 线性渐变

语法：

```css

background: linear-gradient(direction, color-stop1, color-stop2, ...)

#direction:to bottom right/left top

#或者 角度

background: linear-gradient(angle, color-stop1, color-stop2);

#angle:180deg

```


颜色 支持透明

rgba(255,0,0,0)

例子：

`background-image: linear-gradient(-90deg, #00C8BE 2%, #3FC3ED 96%);`

------------

#### 1.2 径向渐变

```css

background: radial-gradient(center, shape size, start-color, ..., last-color);

```

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下，渐变的中心是 center(表示在中心点)，渐变的形状是 ellipse(表示椭圆形)，渐变的大小是 farthest-corner(表示到最远的角落)。

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

------------

PS:

```css

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

-o opera 欧鹏浏览器

-webkit-linear-gradient

-o-linear-gradient

-moz-linear-gradient

```

------------

### 2、css 设置 背景色透明

```css

background: rgba(0, 0, 0, 0.5);

opacity:0.4;

filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

```

有opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性


------------

The End~