css3新增属性（背景）

最新推荐文章于 2022-06-07 20:22:17 发布

PAN_lu

最新推荐文章于 2022-06-07 20:22:17 发布

阅读量370

点赞数

分类专栏： css3 文章标签： css3 gradient linear

本文链接：https://blog.csdn.net/PAN_lu/article/details/82593926

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、背景色（纯色）

1.RGB 颜色

background-color:rgb(255,0,0)

2.RGBA 颜色

background-color:rgb(255,0,0，.3)

3.十六进制颜色

background-color:##RRGGBB,
其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分

2.背景色（渐变）

1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向（默认从上到下）

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

2.径向渐变（Radial Gradients）- 由它们的中心定义（从左到右）
shape 参数定义了形状

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

颜色结点均匀分布的径向渐变：
div {
  background: -webkit-radial-gradient(circle,blue, green, red); 
  background: -o-radial-gradient(circle,blue, green, red); 
  background: -moz-radial-gradient(circle,blue, green, red); 
  background: radial-gradient(circle,blue, green, red); 
}

div {
  background: -webkit-radial-gradient(circle,blue 5%, green 15%, red 60%); 
  background: -o-radial-gradient(circle,blue 5%, green 15%, red 60%); 
  background: -moz-radial-gradient(circle,blue 5%, green 15%, red 60%); 
  background: radial-gradient(circle,blue 5%, green 15%, red 60%); 
}