CSS控制图片、表格、背景颜色渐变示例

下面是关于“CSS控制图片、表格、背景颜色渐变示例”的完整攻略，包括两条示例说明：

一、CSS控制图片

1.1 显示图片

显示图片需要使用<img>标签，并通过其中的src属性指定图片的路径。同时，设置alt属性可以为图片添加一个替代文本，当图片无法加载时会显示这个文本。

<img src="images/example.jpg" alt="example image">

1.2 裁剪图片

使用clip-path属性裁剪图片，将不需要的部分去掉。该属性的值可以是各种形状，例如圆形、椭圆形、多边形等。

img {
  clip-path: circle(50%); /* 将图片裁剪成圆形 */
}

二、CSS控制表格

2.1 表格边框

使用border属性设置表格边框的粗细、样式、颜色等。

table {
  border: 1px solid #ccc; /* 设置表格边框为灰色实线，宽度为1像素 */
}

2.2 表格间距与内边距

使用border-spacing属性设置表格间距，通过padding属性设置单元格内边距。

table {
  border-collapse: separate; /* 让表格边框分开 */
  border-spacing: 10px; /* 设置表格间隔为10像素 */
}

td {
  padding: 5px; /* 设置单元格内边距为5像素 */
}

三、CSS 控制背景颜色渐变

3.1 渐变背景

使用background属性设置渐变背景，其中的值可以是多个颜色值，表示从上到下或从左到右颜色逐渐过渡的效果。

body {
  background: linear-gradient(to bottom, #ff9900, #ff6600); /* 从上到下渐变，颜色分别为橙色和深橙色 */
}

3.2 带有背景图片的渐变背景

在渐变背景上添加背景图片，可以使用background-image属性。

body {
  background: linear-gradient(to bottom, #ff9900, #ff6600), url(images/background.jpg); /* 添加渐变背景和背景图片 */
  background-size: cover; /* 让背景图片铺满整个屏幕 */
}

以上就是关于“CSS控制图片、表格、背景颜色渐变示例”的完整攻略，希望能对你有所帮助。