CSS笔记——background背景样式、圆角样式和渐变色样式

一、背景样式属性（background)

1. background-color：用来设置元素的背景颜色

   可取值：

   • 具体的颜色名称 red
   • 十六进制颜色值 ，#ffffff
   • hsl() 或者 hsla()
   • rgb() 或者 rgba()

2. background-image：用来设置元素的背景图片

   常见的图片格式：

   • jpg/jpeg 、png 、.gif

   • .webp，一种由Google开发的图像文件格式，旨在提供更小、更高质量的图像文件。

     可以作为JPEG和PNG的替代格式，可以用于加载网站中的图像，减少页面加载时间和网络带宽的使用。

   • base64 ，Base64是一种将二进制数据编码成ASCII字符的编码方法，通常用于在网络上传输文本数据。

     它将二进制数据转换为一串由64个字符组成的文本，这些字符包括大小写字母、数字和两个特殊字符“+”和“/”。

   可以使用图片的URL来设置。可以使用多个background-image来设置多个背景图片，使用逗号分隔。

3. background-repeat：用来设置背景图片的重复方式

   可以设置为repeat（默认）、repeat-x、repeat-y和no-repeat。

4. background-position：用来设置背景图片的位置

   • 可以使用关键字（left、right、top、bottom、center），center ，center。

   • 百分比来设置。

   • 偏移量 X ,Y

5. background-size：用来设置背景图片的尺寸

   • 可以使用长度单位（px、em等）
   • 百分比来设置
   • 使用关键字（cover、contain）来设置。

6. background-origin：用来设置背景图片的起始位置

   可以设置为padding-box、border-box和content-box。

7. background-clip：用来设置背景图片的裁剪区域

   可以设置为border-box、padding-box和content-box。

background复合样式

  background: #00FF00 url(bgimage.gif) no-repeat fixed top;

css雪碧图

**CSS雪碧图（CSS Sprite）**是一种通过将多个小图标或图像合并成一个大图像来减少网页加载时间和HTTP请求数量的技术。

在使用CSS雪碧图时，网页中的多个小图标或图像被组合成一个大的图像文件，并使用CSS的background-position属性将需要的部分显示出来。

二、圆角样式和渐变色样式

1、圆角样式border-radius

可以接受一个或多个值，每个值都表示一个圆角的半径

border-radius: value1 value2 value3 value4;

也可接收百分比

2、渐变样式

CSS渐变可以应用于各种CSS属性，如背景、文本颜色、边框、阴影等等。

下面是CSS渐变的相关属性：

• linear-gradient：线性渐变

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

direction表示渐变方向，可以是to top、to bottom、to left、to right，也可以是一些角度值。
color-stop1、color-stop2等表示渐变过程中的颜色值和位置，位置可以是百分比或像素值。可以添加多个颜色和位置。

• radial-gradient：径向渐变

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

shape表示径向渐变的形状，可以是circle或ellipse；
size表示径向渐变的大小，可以是closest-side、closest-corner、farthest-side或farthest-corner；
position表示径向渐变的中心点位置，可以是一个像素或百分比值；
start-color表示渐变起始颜色，last-color表示渐变结束颜色。

注意：渐变属性的兼容性存在问题，需要考虑浏览器的支持程度，可以使用CSS预处理器或JavaScript来解决兼容性问题。