渐变
1、线性渐变
通过方位值确定渐变方向(颜色至少两个)
background-image: linear-gradient(to right, yellow,green,red,pink);
通过角度定义方向
从左往右
background-image: linear-gradient(90deg,pink,greenyellow);
从上到下
background-image: linear-gradient(180deg,pink,greenyellow); background-image: linear-gradient(-70deg,pink,greenyellow);
角度单位deg
重复
background-image: repeating-linear-gradient(135deg,pink 0,pink 200px,green 200px, green 400px);
2、径向渐变
使用关键字定义渐变形状 circle表示圆形 ellipse表示椭圆(默认情况)
默认从中心渐变
圆形
background-image: radial-gradient(circle,yellow,green);
椭圆
background-image: radial-gradient(ellipse,pink,blue);
定义渐变开始位置
background-image: radial-gradient(circle at 80% 80%,yellow,green);
定义渐变的形状大小
background-image: radial-gradient(circle 80px at 80% 80%,yellow,green);
背景
背景色
opacity:0.2; (透明度,子元素和文本会一起透明)
背景图
background-image:url( )
控制背景图是否重复
默认重复
background-repeat:repeat;
不重复
background-repeat:no-repeat;
只有水平方向重复
background-repeat:repeat-x;
只有垂直方向重复
background-repeat:repeat-y;
控制背景图的位置
使用方位值
background-position:right bottom;
使用长度(可以为负)
background-position:20px 50px;
控制背景图附着情况
background-attachment:scroll; 默认情况 随着页面一起滚动
background-attachment:fixed; 不随页面滚动
控制背景图尺寸(css3新增)
可以通过长度、百分比和关键字(contain和cover)控制
长度
background-size:;
百分比
background-size:50% 80%;
关键字
等比例缩放,尽可能缩放背景图,但不会超过盒子
background-size:contain;
等比例缩放,尽可能缩放背景图,直到盒子占满,背景图超出部分不可见
background-size:cover;
属性简写
background: url(./background.jpeg) no-repeat 20px 40px ;
只设置图片的宽或者高时,图片会等比例的缩放,让图片不会失帧
图片拼合技术 雪碧图sprite
一般放雪碧图用span
1、定视口
显示图片的大小
2、插图片
background-imge:url( )
3、调整位置
background-position:-20px -50px;
flex-grow(把空白部分按比例分配给子元素的宽)写在子元素里面
flex-grow:1;
表格元素
table:定义一个表格,表格元素最外层的元素
th:定义表格的表头
tr:定义表格的行
td:定义表格的单元格
caption:定义表格的标题
thead:定义表格的页眉
tbody:定义表格的主题内容
tfoot:定义表格的页脚
表格的相关属性
colspan:规定单元格可横跨的列数
rowspan:规定单元格可横跨的行数
border-collapse:边框塌陷
表单元素
form:定义一个表单区域,可以获取用户输入的数据
input:输入框,不同的类型会让该元素有不同的含义
select:下拉列表
option:下拉列表的选项
textarea:多行文本框
input
placeholder 文本框 提醒输入内容
password 密码框 maxlength设置可输入的长度
<input type="password" name="" id="" maxlength="6">
button 按钮 没有提交功能
<input type="button" value="单纯的按钮">
submit 按钮,具有提交功能,会发生跳转
<input type="submit" value="提交按钮1"> <button>也是提交按钮</button>
reset 重置按钮
<input type="reset" value="重置">
单选框
通过name属性实现单选效果 有同一个name时只能选一个
<input type="radio" name="gender" id="">男> <input type="radio" name="gender" id="">女>
通过id绑定label标签的文字,使点击文字时也可以选中
<label for="male">男</label> <input type="radio" name="gender" id="">男> <label for="female">女</label> <input type="radio" name="gender" id="">女>
多选框
<input type="checkbox">
提交文件
<input type="file" name="" id="">
下拉列表
<select name="" id=""> <option value="">成都</option> <option value="">上海</option> <option value="">北京</option> <option value="">重庆</option> </select>
多行文本框
resize:none; 控制多行文本框尺寸
<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea> 列 行
新增表单控件
<input type="email" name="" id=""> 邮箱框 <input type="month" name="" id=""> 年月框 <input type="range" name="" id=""> 滑块
<select name="" id="">
只读
<input type="text" value="此框内容只读" readonly>
标志性属性
selected
required 必填
readonly