开发者学堂课程【前端开发 CSS 基础：CSS 属性_背景、颜色、边框 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4257
CSS 属性_背景、颜色、边框
内容介绍
一、背景
二、颜色
三、边框
一、背景
1、属性描述：
它有两种形式，一种是以纯色作为背景，一种是以图片作为背景。
属性 |
描述 |
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动 |
background-color |
设置元素的背景颜色 |
background-image |
把图片设置为背景 |
background-position |
设置背景图片的起始位置 |
background-repeat |
设置背景图片是否及如何重复 |
2、background-color 在代码中的应用：
如果想让背景都变成红色，代码如下：
<! DOCTYPE html>
<html lang="en",
<head>
<meta charset= "UTF- 8">
<title></t1tle>
<style>
body {
background- color: red;
</style>
< /head>
<body>
</body>
</html>
3、background-image 在代码中的应用：
想以一张图片为背景，使用 url 选择图片，首先需要找到与当前文件同级别的文件夹 pic/repeat.jpeg 这张图片，此时就成功引入了这张图片，代码如下：
<meta charset="UTF- 8"»
<title></title>
<style >
Body{
background- image: url("p1c /repeat .jpeg") ;
}
4、background-repeat 在代码中的应用：
设置背景图片是否重复，以及如何重复，它有多个属性值，有 no-repeat 不重复，repeat 重复，repeat-x 重复 x 轴，repeat-y 重复纵轴，现在想要背景图不重复，选择 no-repeat。
代码：
background-repeat:no-repeat；
如果想要它横向重复，选择 repeat-x 执行看效果。重复 y 轴，选择 repeat-y。如果不写这个属性默认就是 repeat 重复。可以看到一个重复排列的背景图片，比如说想让他显示在页面的中间
5、background-position 在代码中的应用：
当前图片渲染的位置，想让它从上面开始渲染，属性值为 top。
代码：
background . position: center top；
执行查看效果，图片处于浏览器中间位置，图片是从顶端开始进行渲染。如果想让它从中间开始渲染，就把 top 改成 center，或者不写，此时就是默认从中间开始渲染，查看效果。它处在页面中的中间，背景图片从中间进行渲染。它也可以写成数值的方式，比如100px center，执行查看效果。此时可以看到它位于浏览器100px 的位置，图片是从中间开始渲染。这就是 repeat 的属性。
6、background-attachment 在代码中的应用：
写几个 p 标签，给它一些内容，多复制几个为了撑开页面。
代码：
<p>背景样式</p>
执行查看效果，当滚动页面的时候，背景图片也随之滚动。
如果想让背景图片固定，则写入 background- attachment: fixed; 它的意思是背景图片不随页面的滚动而滚动，刷新看效果，当滚动页面的时候，背景并不随之滚动。
background-image: url("pic/repeat.jpeg") ;
background- repeat: no- repeat;
background- attachment: fixed;
这三行属性可以用一行属性代替，只需写入
background：url("p1c/repeat.jpeg")no- repeat fixed；
此时再进行执行，可以看到效果与之前是一样的。这就是整理的一些背景的属性。
二、颜色
1.颜色值:
（1）Color Name (用颜色名称表示法): color:red；
（2）HEX (十六进制数值表示法) : color:#ffoooo；
（3）RGB（三原色:红绿蓝)
（4）RGBA（三原色+不透明度[0.O-1.0])
（5）透明色 : color.transparent；
2.属性:
opacity : <number>·······设置对象的不透明度
值为1:不透明
值为0:完全透明
三、边框
属性 |
描述 |
border-width |
边框宽度 |
border-style |
边框样式 |
border-color |
边框颜色 |
border-radius |
设置圆角边框 |
box-shadow |
设置对象阴影 |
border-image |
边框背景图片 |
边框类似于背景，它有两种形式，第一种可以用颜色来表示，第二种也可以用背景图片来表示。
代码：
<style>
container {
width: 200px ;
height: 200px; ,
background- color: antiquewhite;
border -width: 5px ;
border-color: aqua;
border-style: solid;
border-radius: 5px;
box- shadow: Spx Spx 10px rgba(0,0,0,0.2);
}
演示效果，能看到阴影效果。
此时是同时设置 div 的四个边，也可以单独设置每一条边，上面这条边叫 border-top，左边 border-left ，右边 border-right，下边 border-bottom，设置顶部和左边，代码如下：
container {
width: 200px;
he1ght: 200px ;
background-color: antiquewhite;
border -width: 5px;
border-color: aqua;
border -top-color: red;
border-style: solid;
border- left-style: dashed;
border -radius: 5px ;
bох- ѕhаdоw: 5рх 5рх 10рх rgbа(0,0,0,0.2);
}
<div class: "container">
演示效果，上边的边框变成了红色，左边的边框变成了虚线，以此类推，这些属性都可以这样设置。
