背景色
背景颜色：background-color
透明度：opacity：0.5； 元素与文本一起透明（对盒子里的所有内容生效）
背景图
背景图：background-image：url（）；括号里面写图片路径
控制背景图是否重复
background-repeat：repeat；
1、默认情况重复：repeat；
2、不重复：no-repeat；
3、水平方向重复：repeat-x；
4、垂直方向重复：repeat-y；
控制背景图的位置
background-position：
1、使用方向：top right bottom left；
只设置一个值的时候，另一个方向居中显示
background-position：right bottom；
2、使用长度，（可以为负数，超出部分不可见）
background-position：20px 50px;（水平方向 垂直方向）
控制背景图附着情况
1、跟随页面滚动：background-attachment: scroll; （附着在页面）
2、不随页面滚动：background-attachment: fixed;
控制背景图尺寸（css3新增）
background-size：
可以通过长度、百分比和关键字（contain 和 cover）控制
1、长度：background-size：300px 200px；
2、百分比：background-size：80% 50%；
百分比相对于盒子的尺寸，只设置一个值时，第二个值默认为自动，等比例缩放
3、关键字
①、等比例缩放：background-size：contain；
尽可能缩放背景图，但不会超过盒子，宽或者高某一边触到边线停止缩放
②、等比例缩放：background-size：cover；
尽可能缩放背景图，直到盒子占满，背景图超出部分不可见
属性简写
background：color url（） repeat position atta ；
常用：background：color url（）position；
图片拼合技术
雪碧图、spring
1、定视口：设置在可视窗口的显示大小尺寸，根据要显示的大小来设置
2、插图片
3、调整位置
渐变
1、线性渐变
background-image：linear-gradient ( to right, green 0,green 250px, red 250px,red 500px);
通过方位值确认渐变方向：to left right top bottom
颜色至少两个
重复线性渐变：repeating-linear-gradient()
background-image: repeating-linear-gradient（45deg,green 0,green 40px,transparent 40px,transparent 80px);
2、径向渐变
background-image：radial-gradient（）
通过水平线和渐变线之间的角度定义方向，单位 deg
circle 从中心开始渐变
默认：椭圆：ellipse
定义渐变开始的位置 ：background-image：radial-gradient（circle at 20% 50%，）；
定义渐变的形状大小：
1、在形状后面加数值
background-image：radial-gradient（circle 50px at 20% 50%，red，green）；
2、在颜色后面加数值
background-image：radial-gradient（circle 50px at 30% 50%，red 50px，green 50px）；
重复径向渐变：repeating-radial-gradient()
background-image: repeating-radial-gradient(red 10%,green 15%);
表格与表单
表格
table：定义一个表格 表格元素最外层的元素
th：定义表格的表头
tr：定义表格的行
td：定义表格的单元格
caption：定义表格的标题
thead：定义表格的页眉
tbody：定义表格的主题内容
tfoot：定义表格的页脚
thead、tbody、tfoot可以不写
<body>
<!-- 表头 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>籍贯</th>
<!-- 第一行 -->
<tr>
<td>xxx</td>
<td>000</td>
<td>男</td>
<td>xx</td>
</tr>
<!-- 第二行 -->
<tr>
<td>xxx</td>
<td>00</td>
<td>男</td>
<td>xx</td>
</tr>
<tr>
<td>表格底部</td>
</tr>
</body>
表格相关属性：
colspan：合并列（横向合并）
rowspan：合并行（纵向合并）
合并后会多出来一个单元格，需手动删除
border-collapse：边框塌陷（合并边框）
table,td{
border: 1px solid ;
border-collapse: collapse;
}
表单
1、表单元素
- form：定义一个表单区域，可以获取用户输入的数据
- input：输入框
- select：下拉列表
- option：下拉列表的选项
- textarea：多行文本框
2、输入框类型
-
text：文本框
<form action=""> <input type="text" placeholder="输入提示内容"> <!-- readonly 表示只读 内容通过value输入 --> <input type="text" value="这个内容只读" readonly> <!-- required 表示必填 没有填提交会有提示 --> <input type="text" required> <!-- disabled 表示禁用 --> <input type="text" disabled> </form> -
password：密码框
<!-- maxlength 设置可输入的长度 --> <input type="password" name="" id="" maxlength="6"> -
button：按钮（没有提交功能）
<input type="button" value="单纯的按钮"> -
submit：提交按钮
<input type="submit" value="提交按钮"> <!--button元素也是提交按钮 提交按钮：具有提交功能，会发生跳转--> -
高级搜索
-
reset：重置按钮
<input type="reset" value="重置"> -
radio：单选框
<input type="radio" name="gender" id="">男 <input type="radio" name="gender" id="">女 <!-- 通过name属性，设置相同的属性值实现单选效果--> <label for="male">男</label> <input type="radio" name="gender" id="male"> <label for="female">女</label> <input type="radio" name="gender" id="female"> <!--通过id绑定lable标签的文字，使点击文字时也可选中--> -
checkbox：多选框
<input type="checkbox" name="" id=""> 肉末茄子 <input type="checkbox" name="" id=""> 蒜苗回锅 <input type="checkbox" name="" id=""> 小炒肉 <input type="checkbox" name="" id="" checked> 米饭 <!-- 文字也可写在最前面 通过checked可以设置默认选择checked完整写法应该是checked:"checked" 但当属性与属性值相同时可以简写，这种叫做标志性属性，也叫特殊属性--> -
file：选择文件
<input type="file" name="" id="">(新增)
-
email：输入邮件地址，没有@会提示
<input type="email" name="" id=""> -
month：可选择月份
<input type="month" name="" id=""> <!-- 可选择具体日期 --> <input type="date" name="" id=""> <!-- 具体到分钟 --> <input type="datetime-local" name="" id=""> -
内容必填：required
<input type="password" name="" id="" maxlength="6" required>
3、下拉列表
-
select
<select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="" selected>广州</option> <option value="">深圳</option> </select> <!-- selected表示默认该选项在页面上显示 -->
4、多行文本框
-
textarea
<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea> <!-- cols表示行的数量，row表示列的数量，且该文本框默认是可拉伸的 resize: none可控制其固定尺寸，不可拉伸，该属性是CSS中的-->
