『我们可以很简单就拥有个人主页⑦』装修主页吧！·图像篇

December 14, 2020

声明

本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。

如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于 CSS 内设置图像用的格式声明及其属性，主要参考了 HTML 基础教程和 CSS 文档的内容。

本篇覆盖内容

自定义 CSS：「盒子」的概念、背景颜色、背景图片、边缘、边框、圆角、阴影
插入：文字边框

上一篇：装修主页吧！·文字篇

『我们可以很简单就拥有个人主页』系列目录

① 内容是主页的基础 ② 插入各类元素让文章丰富多彩·上 ③ 插入各类元素让文章丰富多彩·下 ④ 装修主页吧！·基础篇 ⑤ 装修主页吧！·源代码篇 ⑥ 装修主页吧！·文字篇 ⑦ 装修主页吧！·图像篇 ⑧ 装修主页吧！·技巧篇

在介绍图像相关的属性声明之前，我们需要简单了解一下 HTML 和 CSS 究竟是怎样呈现各个元素的。您可以想象一个「盒子」，每个元素都是被放置在这样一个不可见的「盒子」中的，「盒子」之中可能装着另一个「盒子」，就像标签内可以包含其他标签一样。而您可以自由设置「盒子」的背景、「盒子」的边缘、「盒子」的边框、元素离「盒子」边缘的距离、元素在「盒子」之中的摆放位置等等。修改每一个元素里的图像相关的内容，就相当于修改这个「盒子」相关的内容。

background-color

background-color 用来设置盒子的背景颜色。与字体颜色类似，直接填写颜色的名字或十六进制编码即可。

background-image

既然背景颜色可以被修改，那么背景也可以直接用图像表示。您可以使用 background-image 这个声明来设置某一元素的背景：

background-image: url(图片直链);

如果您选择的图片中有透明背景的 .png 文件，那么背景可以叠加。您只要使用 , 隔开两个 url() 即可。其中写在前面的图片会叠在最上层：

background-image: url(上面的图片直链), url(底下的图片直链);

background-repeat

一般来说，假如背景图片的尺寸不足以覆盖整个盒子，那么空白处会呈现出重复的图像来使背景图片平铺在整个盒子中。您可以利用 background-repeat 来设定是否让背景图片重复：

background-repeat: repeat;：全方面无死角重复，边缘摆放不下完整图片的话会裁剪掉边缘的图片
background-repeat: repeat-x;：只横向重复，会裁剪边缘
background-repeat: repeat-y;：只竖向重复，会裁剪边缘
background-repeat: no-repeat;：不重复，空白处保留空白
background-repeat: space;：重复，如果边缘摆放不下完整图片会选择在重复图片之间留出空隙而不是裁剪
background-repeat: round;：重复，如果边缘摆放不下完整图片会选择压缩全部图片的大小来保证所有重复图片都能够平铺出来

background-position

如果您的背景图片的尺寸较小，您可以用 background-position 来自定义其摆放位置。您可以直接用表示位置的词来作为属性数值：

background-position: left;：最左边
background-position: right;：最右边
background-position: top;：最上方
background-position: bottom;：最底部
background-position: center;：正中

当然，如果您想将背景图片摆放在特定的位置，您需要填写其横纵坐标。

background-position: 横坐标 纵坐标;

其中，横坐标表示图片离盒子左边框的距离，纵坐标则是图片离盒子上边框的距离。您可以使用的单位依旧与 font-size 所使用的相同，不过，此时的百分比表示的是图片摆放的位置是盒子的宽或高的百分之几。

如果您不想利用左边框和上边框作为基准，您可以在数值之前加上边框的名称：

background-position: 边框 距离 边框 距离;

比如 background-position: bottom 10px right 20px; 表示该元素的背景位于元素所在的盒子的离下边框 10 px、离右边框 20 px 的位置。

margin

margin 代表盒子的透明边缘，即这一元素会与周围的其他元素之间间隔多少距离。您可以分别为上下左右四个边缘的宽度进行自定义的设置，使用的单位依旧与 font-size 的相同。

margin: 上 右 下 左;

您同样可以不填其中的某项数值，不过如果 margin 的属性数值不足四项，它会按照如下的规律进行边缘宽度的设置：

一个：全部边缘都按照此数值设置
两个：两个数字将按顺序分别设置上下和左右边缘
三个：三个数字将按顺序分别设置上、左右和下边缘

如果您只是单纯想要不设置其中某条边缘，那么您只需要在其对应的位置填写 0 即可。比如，如果您想设置上边缘为 10 px、下边缘为 5 px 以及左边缘为 15 px，但不想设置右边缘的话，您需要编写 margin: 10px 0 5px 15px;。

border

border 用来设置盒子的边框，它的属性数值由多个部分组成：

border: 粗细 样式 颜色;

其中，样式主要有以下几种：

solid：单实线
dashed：虚线
dotted：点线

border 含有的样式其实不止这几种，但经过测试后我发现有一部分在这里似乎无法正常生成，故不做介绍。

border-radius

如果您希望您的边框的四个角是曲线而非直角，您可以使用 border-radius 进行调整：

border-radius: 左上角 右上角 左下角 右下角

可以使用的数值单位和 font-size 所使用的相同。您同样可以省略其中几个部分的数值，按照您填写的数值数量，规律如下：

一个：全部角都按照此数值设置
两个：两个数字将按顺序分别设置左上右下和右上左下的角
三个：三个数字将按顺序分别设置左上角、右上角左下角和右下角

填写 0 代表该角为直角。

padding

padding 所控制的是元素距离盒子的边框的距离。与边缘的 margin 相似，您可以设置盒子内元素离盒子的上下左右四个边框的距离：

padding: 上 右 下 左;

其余的规律，如省略掉其中几个部分的数值后的结果，皆与 margin 相同：

一个：离全部边框的距离都按照此数值设置
两个：两个数字将按顺序分别设置离上下边框和左右边框的距离
三个：三个数字将按顺序分别设置离上边框、左右边框和下边框的距离

如果您只是单纯想要不设置离某条边框的距离，那么您只需要在其对应的位置填写 0 即可。

box-shadow

与文字阴影的 text-shadow 类似，box-shadow 可以设置元素所在的盒子的阴影。属性数值的组成也相同：

box-shadow: 横向移动距离 竖向移动距离 模糊半径 颜色;

横向与竖向的移动距离数值为正数时说明是向右方和下方移动；负数则表示向左方和上方移动。您可以增加多个阴影，需使用 , 隔开每个阴影的属性数值。

插入边框

如果先用 border 设计一个边框，再把上面提到的其它格式声明组合在一起，将其赋予某段文字，会发生什么呢？是的，您可以把这篇文章所提到的格式声明结合起来，为一段文字加上喜欢的边框。

首先设计一个边框吧！您可以自由搭配各类格式声明，组合成您想要的边框——就像做炖菜一样，放入自己喜欢的食料，再将它们炖在一起。

✎ 例如

格式声明：

/* 2px 的虚线黑色边框*/
border: 2px dashed black;
/* 背景颜色为 WhiteSmoke */
background-color: whitesmoke;
/* 左上、右上和右下角设置了 50px 的弧度 */
border-radius: 50px 50px 50px 0;
/* 让文字离四周的边框保持 20px 的距离 */
padding: 20px;
/* 阴影向右移动 15px，向下移动 10px，以 5px 为半径模糊，颜色为灰色 */
box-shadow: 10px 5px 5px gray;

效果：

边框设计好了！要如何应用呢？您需要在写作时利用 HTML 的 <div> 标签把想要增加边框的段落框起来，比如 <div>文本</div>。

接下来您有两个选择：

如果只是想给这一段文字加特殊的边框，该边框只使用一次：
在 <div> 标签内增加 style=“” 的标签属性，并在引号内填写制作边框所用的格式声明。

✎ 例如
输入：
```
<div style = “border: 2px dashed black; background-color: whitesmoke; border-radius: 50px 50px 50px 0; padding: 20px; box-shadow: 15px 10px 5px gray”>文本</div>
```
效果：
文本

如果您想要重复使用这个边框，即给多个文本赋予相同的边框格式：
首先，您需要在 <div> 标签内增加 class=“boxed” 的标签属性，即 <div class=“boxed”>文本</div>。利用这个标签将各处的您想要增加边框的文本框起。

随后，进入博客「自定义 CSS」的界面。

如果您有阅读过第五篇教程里关于通过阅读 HTML 源代码来填写 CSS 选择器的部分，那么或许您已经猜到接下来要做什么了。是的，我们可以利用新增的 class 属性配合 CSS 选择器可以用的 . 来快速给这几个生成边框所用的 <div> 标签赋予格式。

您只需在 CSS 代码中增加一个新的 .boxed 选择器，即输入 .boxed {}，并在括号内填写制作边框所用的格式声明。

发布文章后，您就可以看到这些位于 <div class=“boxed”> 和 </div> 之间的文本都拥有了您设计的边框。

✎ 例如
输入：
```
<div class=“boxed”>有边框的文本 1</div>
没有边框的文本
<div class=“boxed”>有边框的文本 2</div>
```
在「自定义 CSS」中新增：
```
.boxed {
    border: 2px dashed black;
    background-color: whitesmoke;
    border-radius: 50px 50px 50px 0;
    padding: 20px;
    box-shadow: 10px 5px 5px gray;
}
```
效果：
有边框的文本 1
没有边框的文本
有边框的文本 2

月球