《三栏新拟态自适应SEO博客主题》的自定义CSS用法 美化页面样式

前言

《三栏新拟态自适应SEO博客主题》主题功能介绍：bufanz.com/post/109.html

《三栏新拟态自适应SEO博客主题》主题配置使用教程：bufanz.com/post/111.html

CSS是什么？

　　CSS是定义网页样式结构，比如修改网页背景颜色、背景图，模块背景颜色、不透明度（如果有背景图，能看到背景图），文字大小、颜色等等，被用于描述网页上的信息格式化和显示的方式，可以把网页样式美化成你想要样式或者配色，下图是美化前后对比。

　　此主题增加了自定义CSS接口，主题更新后不会改变设置的自定义CSS代码，这是方便之处。

如何查看页面样式结构的名称和代码

鼠标右键点击网页需要修改样式的地方，点击“检查”，或者在页面按F12键。

注意下图样式文件名称，有style.css:xx（xx是此代码的行数）的是样式原文件，需要修改代码先在这里测试。

修改操作。（选好颜色按回车键保存颜色值）

如何保存修改后的CSS代码

在上图中，我演示的是修改导航栏背景色，修改好了后，复制该样式结构名称和已修改的代码。

要复制的代码如下：

.navbar {
    background-color: #61c577;
}

该样式结构的其它代码未修改就不用复制。

在主题配置的自定义CSS加入以上的代码，再保存配置。

CSS代码可以改成单行：

.navbar {background-color:#61c577}

样式修改了2个以上的代码，用半角分号间隔，最后一个代码后面可以不加分号，代码如下：

.navbar {background-color:#61c577;border-bottom:1px solid #61c577}

多个样式结构有一样的代码，样式结构名称用半角逗号分隔，代码如下：

.panel,.navbar {background-color:#61c577;border-bottom:1px solid #61c577}

在原样式添加其它代码

比如在每个模块添加阴影效果，如下图：

通过浏览器的“检查”找到样式结构代码，添加以下代码：

box-shadow: 0 1px 3px rgba(26,26,26,.5)

在自定义CSS中添加以下代码：

.panel {
    box-shadow: 0 1px 3px rgba(26,26,26,.5)
}

上面代码box-shadow的值，是推荐值，可以随意修改阴影方式、颜色、距离、不透明度等等。