1.子代选择器有兼容性问题
2.css3 IE9 以后的版本支持 IE9 支持一部分 IE678根本不支持。
3.苹果 自带 safari浏览器 安卓默认浏览器 是chrome。
4.浏览器 前缀
Safari，chrome webkit
firebox mos
ie ms
opera o
-webkit-border-radius:50%
为了兼容这四个需要全都写上。
5.兼容性查询网站 ： CAN I USE
6.* 通配符
css 3 新样式
1.text-shadow:
一共四个参数 ，第一个 水平偏移量 第二个 垂直偏移量 第三个 阴影程度 第四个阴影颜色
2.颜色的三种标示值
1. 单词 例如 red
2.十六进制 例如#fff
3.rgb(255,0,0)红绿蓝 都到0-255。
4rgba(255,0,0,.3)第四个参数是透明度，取值从零到1 其中零可以省略 直接写.3
3. 文本省略
1.word-break: break-all;强制换行
2.overflow: hidden; 溢出隐藏
3.text-overflow: ellipsis; 文本溢出变省略号
4.text-overflow: clip; 文字溢出剪裁；
4.box-shadow: 10px 10px 10px 10px; 盒子阴影
5.z-index 调整层级而且只有定位的元素才有效
6..class::before,.class::after在class里插入一个元素
：：after{
content:""
}
必须有而且 这个元素实际上是行级的不能设置宽和高。
7. 五环：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*#app{
text-shadow: 10px 10px 2px red;
box-shadow: 10px 10px 10px 10px;
width: 200px;
}
#div1{
width: 200px;
height: 200px;
border:1px solid #000;
overflow: hidden;
/*text-overflow: ellipsis;*/
/*word-break: break-all;*/
/*text-overflow: clip;
}*/
*{
padding: 0;
margin:0;
}
#app{
width: 800px;
height: 800px;
background: gray;
position: relative;
}
.div,.div::after{
width: 200px;
height: 200px;
border:10px solid #fff;
border-radius: 50%;
}
.div::after{
content:"";
position: absolute;
top:-10px;
left: -10px;
}
.div1{
border-color: red;
position: absolute;
}
.div2{
border-color: yellow;
position: absolute;
left:220px;
top:0;
}
.div3{
border-color: blue;
position: absolute;
left:440px;
top:0;
}
.div4{
border-color: green;
position: absolute;
left:110px;
top:110px;
}
.div5{
border-color: black;
position: absolute;
left:330px;
top:110px;
}
.div1::after{
border-color: red;
z-index:1;
border-bottom-color: transparent;
}
.div2::after{
border-color: yellow;
z-index:1;
border-left-color: transparent;
/*border-bottom-color: transparent;*/
/*border-right-color: transparent;*/
}
.div3::after{
border-color: blue;
z-index:3;
border-left-color: transparent;
}
.div4::after{
border-color: green;
}
.div5::after{
border-color: black;
z-index:2;
border-top-color: transparent;
}
</style>
</head>
<body>
<!-- <div id="app">
我是赵白羽
</div>
<div id="div1">hkjhkdhakhLJAHLHkGKGALKHOHkgjkaSGKGkhkHjlkjlkjalkjlkjljlkjalkjljljlkjljlihuhoih</div> -->
<div id="app">
<div class="div div1"></div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="div4 div"></div>
<div class="div5 div"></div>
</div>
</body>
</html>
