知识点一:圆形
border-radius: 左上角 右上角 右下角 左下角；大小越靠近宽度和高度，角度就越大
知识点二：兼容性问题
-webkit- 谷歌 Safari
-o- 欧朋
-ms- IE
-moz- 火狐
知识点三：PC端调试移动端方法
iPhone ：分辨率是最小的
知识点四：选择器
（一）属性选择器
|
[target] |
选择所有带有target属性元素 |
2 |
|
|
[target=-blank] |
选择所有使用target="-blank"的元素 |
2 |
|
|
a[src^="https"] |
选择每一个src属性的值以"https"开头的元素 |
3 |
|
|
a[src$=".pdf"] |
选择每一个src属性的值以".pdf"结尾的元素 |
3 |
|
|
a[src*="runoob"] |
选择每一个src属性的值包含子字符串"runoob"的元素 |
（ 二）伪类选择器
|
p:nth-child(2) |
选择每个p元素是其父级的第二个子元素 |
3 |
|
|
p:nth-last-child(2) |
选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
3 |
|
|
p:nth-of-type(2) |
选择每个p元素是其父级的第二个p元素 |
3 |
|
|
p:nth-last-of-type(2) |
选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
3 |
|
|
p:last-child |
指定只有选择每个p元素是其父级的最后一个子级。 |
||
|
p:first-child |
指定只有当<p>元素是其父级的第一个子级的样式 |
||
（三）伪元素选择器
|
p:first-letter |
选择每一个<P>元素的第一个字母或者第一个汉字 |
1 |
|
|
p:first-line |
选择每一个<P>元素的第一行 |
1 |
|
|
2 |
|||
|
p:before |
在每个<p>元素之前插入内容 |
2 |
|
|
p:after |
在每个<p>元素之后插入内容 |
知识点五：颜色（四种样式）
1、英文名的
2、background: rgb(255,255,255); background：rgba(255,255,255,1) 最后一位是透明度，取值范围是0-1之间，其余的取值范围是0-255
3、十六进制 #FFFFFF
4、background：hsl(色调，饱和度，亮度); background：hsla(色调，饱和度，亮度，透明度);
色调 (0-360) 0--红色 120--绿色 240--蓝色
饱和度（0-100%）
亮度（0-100%）
透明度（0-1）0表示完全透明
知识点六：盒子和文本阴影
box-shadow：x轴，y轴，模糊半径，颜色；
text-shadow:x轴，y轴，模糊半径，颜色；
知识点七：文本溢出
(单行溢出)
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
（多行溢出）
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n;
overflow: hidden;
知识点八：图片边框
border-image: url(图片地址) 10 10 round/stretch；round 是否平铺 stretch是否
配合 border: 1px solid #000000；
知识点九：副文本框
原有的：<textarea></textarea>
新学的：在盒子上加属性overflow: auto; 和 resize；both/vertical/horizontal/; both水平和垂直方向上的 vertical 垂直方向的 horizontal 水平方向的
以上两者配合使用
知识点十：禁用
cursor: not-allowed; 加在伪类hover事件上的
知识点十一：box-sizing
box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。属性值
|
值 |
说明 |
|
content-box |
这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
|
border-box |
指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
|
inherit |
指定 box-sizing 属性的值，应该从父元素继承 |