css--背景，边框，列表，链接等属性

浏览器支持IE为-ms-，Firefox为-moz-,chrome和iPhone自带浏览器为-webkit-，Opera为-o-

1.背景：

• [background-color]CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent" 二者选其一
• [background-image]CSS background-image 指定在元素的背景中出现的背景图像。这可以是静态文件，也可以是生成的渐变。
• [background-position]指定背景应该出现在元素背景中的位置。
• [background-repeat]CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。 指定背景是否应该被重复(平铺)。
• [background-attachment]"如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。值有scroll（页面滚动时，背景随之滚动），fixed（固定不滚动），local（滚动元素时，背景随之滚动）
• [background]background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
• [background-size]background-size 设置背景图片大小。允许动态调整背景图像的大小。
  ·详细讲color，image，position，repeat，size
  ·background-color默认背景颜色不是white白色！！！而是透明的，所以你希望元素是白色的，必须要明确的设置它。
  ·background-image静态文件，也可以是生成的渐变
  静态文件background-image:url(网络地址或者本地地址)，默认清空下，图像在水平和垂直方向上都是重复的！
  生成的渐变background-image: linear-gradient(方向到哪里结束, 开始的颜色, [可以指定多个颜色站点],结尾的颜色);例如：background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
  结果为（从上到下，黄色开始，向下渐变到#dddd00 的50%，然后到橙色）：
  
  

  线性渐变

·由于默认情况向图像在水平和垂直方向上都是重复的，所以用background-repeat来解决这个问题，它的默认值是repeat，使得整个元素的背景被填充，常见的值为：
no-repeat: 图像将不会重复:它只会显示一次。
repeat-x: 图像将在整个背景中水平地重复。
repeat-y: 图像会在背景下垂直地重复。
例如：HTML文件中：

Exciting box!

CSS 文件中：
p {
font-family: sans-serif;
padding: 20px;
background-color: yellow;
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
background-repeat: no-repeat;
}
结果如下：

不重复的背景图片

·但是这样看起来怪怪的，它现在重叠了文本。我们需要把它放在一个更好的地方。所以我们用到了background-position在指定任意位置放置背景图片，通常，该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形，x坐标从左到右，y坐标从上到下。
常用的值类型有：

图片定位

还应该注意，您可以混合并匹配这些值，比如 background-position: 99% center。还要注意，如果您只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。
在上面CSS文件的代码p中添加：background-position: 99% center;
结果如下：

图片定位为占据水平99%，垂直方向为center

·background-size:可以使用你期望的所有长度单位来指定你想要的值——px，百分比， rem等，例如：background-size:30% 30%;

2.边框：CSS边框属性允许你指定一个元素边框的样式和颜色。

边框

边框简写属性 border:5px solid red;5px指定border-width，solid指定border-style，red指定了border-color

3.列表：
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

列表实例

列表的所有属性

4.链接：
伪类a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

链接样式

text-decoration 属性主要用于删除链接中的下划线：a:link {text-decoration:none;}