CSS基础教程

news2024/11/16 8:58:10

css背景

1.background-color

2.透明度和不透明度

3.使用RGBA的透明度

css背景图片

css背景重复

编辑

1.background-repeat

2. background-repeat:no-repeat

3.background-position

css背景附着

css边框

1.border-style 边框样式

2.border-width 边框宽度

4.border-color 边框颜色

5.CSS 边框各边

编辑

它的工作原理是这样的：

border-style: dotted solid double dashed;

border-style: dotted solid double;

border-style: dotted solid;

border-style: dotted;

6.border-radius 圆角边框

7.CSS外边框

css背景

1.background-color

该属性指定元素的背景颜色

也可以指定<p>,<h1>等元素的背景颜色

2.透明度和不透明度

opacity属性指定元素的不透明度或透明度，取值范围为0.0~1.0，值越低越透明

3.使用RGBA的透明度

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

css背景图片

background-image 属性指定作用元素背景图片，默认情况下，图片会重复，以覆盖整个元素

body {
  background-image: url("paper.gif");
}

p {
  background-image: url("paper.gif");
}

css背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

1.background-repeat

background-repeat属性有repeat-x，repeat-y两个参数，前者向水平方向重复，后者向垂直方向重复

2. background-repeat:no-repeat

该属性指定只显示一次背景图片

3.background-position

该属性用于指定背景图片的位置，属性值可以是数值，关键词或百分比

css背景附着

background-attachment属性指定背景图片会不会随着页面一起滚动

参数： fixed 不滚动 scroll 滚动

css边框

css border属性设置指定边框的样式和颜色

1.border-style 边框样式

border-style 属性指定要显示的边框样式，参数有：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

2.border-width 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

特定边的宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

4.border-color 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent

注释：如果未设置 border-color，则它将继承元素的颜色。