css背景边框列表链接

ife2018 第四天，背景边框列表链接和更复杂的选择器

课程目标

掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性。

background属性

background-color: #fff;
background-image: url(img/background.jpg)
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;

backgorund-repeat

no-repeat -停止完全重复背景。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat—默认值；双向重复。

background-attachment

注意：background-position的值和 background-attachment息息相关，background-position的位置是相对于整个页面的位置。以下是属性值
inherit： 继承父级
fixed ： 固定在页面上
scroll: 随着页面滚动

background-position

CSS3中的background-size

表示铺满整个屏幕

background-size: 100% 100%;

background 的简写形式：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

例如：规定背景图片，不重复，固定在左上角

background: url() no-repeat fixed top left;

渐变gradient

线性渐变 linear-gradient

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

径向渐变 radial-gradient

径向渐变从中心点（原点）开始逐渐过渡颜色。它们是通过radial-gradient()函数生成的。

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

边框border

border属性中的border-style.

例如：

div{width:200px;height:200px;background:#3388ff; border: 0.5rem outset #296ece;

更多border属性在MDN中查看。

列表list

常见三种列表类型。

<ol><li>item1</li><li>item2</li></ol>//有序列表
<ul><li>item1</li><li>item2</li></ul>//无序列表
<dl><dt>item1<dd></dd><dd>item2</dd></dt></dl>//描述性列表 dt里允许有多个dd

列表样式

更多 list css 属性细节在MDN中查看。

参考地址：
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://www.w3school.com.cn/cssref/pr_border-style.asp