CSS语法其实非常简单，我们只需学习一些基本的属性即可

CSS 背景#

CSS background-color#

background-color 属性指定元素的背景色。

颜色通常由以下方式指定：

有效的颜色名称 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

实例：

1
body {
2
  background-color: lightblue;
3
}

不透明度 / 透明度#

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

实例：

1
div {
2
  opacity: 0.3;
3
}

使用 RGBA 的透明度#

如果您不希望对子元素应用不透明度，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

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

实例：

1
div {
2
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
3
}

CSS 背景图像#

background-image 属性指定用作元素背景的图像。

1
body {
2
  background-image: url("https://example.com/img.jpg");
3
}

但是为了避免重复，我们一般使用

1
body {
2
    background-image: url(https://cdn.jsdelivr.net/gh/WhitemuTeam/web-img/img/70856059.webp); /*此处自定义壁纸*/
3
    background-repeat: no-repeat;
4
    background-attachment: fixed;
5
    background-position: center;
6
    background-size: cover;
7
}

CSS 圆角边框#

border-radius 属性用于向元素添加圆角边框：

1
p {
2
  border: 2px solid red; /*添加边框*/
3
  border-radius: 5px; /*添加圆角*/
4
}

等待更新，不过你可以先看一下下面的实例

实例#

通过上述教程我们很容易写出一个非常简单的CSS用于美化Bing搜索引擎

发布在必应，UserStyles.world：

1
/*Bing美化*/
2
/*背景图片*/
3
body {
4
    background-image: url(https://cdn.jsdelivr.net/gh/WhitemuTeam/web-img/img/70856059.webp); /*此处自定义壁纸*/
5
    background-repeat: no-repeat;
6
    background-attachment: fixed;
7
    background-position: center;
8
    background-size: cover;
9
}
10
/*搜索结果美化*/
11
#b_results > li {
12
    background-color: rgba(0, 0, 0, 0.4);
13
    border-radius: 5px;
14
}
15
/*wiki美化*/
16
#b_context .b_ans,
17
#b_context #wpc_ag {
18
    background: none;
19
    background-color: rgba(0, 0, 0, 0.4);
20
    border-radius: 5px;
21
}
22
/*搜索栏美化*/
23
#est_switch+#sb_form .b_searchboxForm, #est_switch+#sb_form .b_searchboxForm:hover {
24
    border-top-left-radius: 24px;
25
    background: rgba(0,0,0,0.5);
26
}
27
#b_header #sw_as #sa_ul, #uaanswer #sw_as #sa_ul, #sw_as #sa_ul li:last-of-type {
28
    border-radius: 0 0 24px 24px;
29
    background: rgba(0,0,0,0.6);
30
}
31
/*旁搜索按钮*/
32
#mfa_root .mfa_btn {
33
    background-image: initial;
34
    background-color: rgb(24, 26, 27,0.9);
35
}
36
/*隐藏小冰*/
37
#ev_hook {
38
    background-image: initial;
39
    height: 0;
40
}
41
.ev_talkbox_wrapper_min {
42
    background-color: transparent;
43
    opacity: 0;
44
}
45
/*调整细线*/
46
#b_header {
47
    border-bottom-color: rgb(0,0,0,0.19);
48
}
49
/*视频选项卡*/
50
.mc_vtvc {
51
    background-color: rgb(24, 26, 27,0.5);
52
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px, rgb(0 0 0 / 10%) 0px 2px 3px 0px;
53
}
54
/*隐藏翻译广告*/
55
.b_hPanel {
56
    opacity: 0;
57
    width: 0;
58
    height: 0;
59
}

截图：