1、使用CSS3 box-shadow制作同心圆：
<div class="circle"></div>
.circle{
width:10px;
height:10px;
border-radius:50%;
background-color:black;
box-shadow:0 0 0 3px red;
}
最后的效果：
image.png
有点像一只眼睛哈哈哈~
参考链接：https://blog.csdn.net/zhanglongdream/article/details/72773511
2、用HTML、CSS制作一个对话框尖角
首先理解一个元素的border分为top，right，bottom，left
image.png
代码：
image.png
于是我们想要的对话框尖角就要有了~
效果：
image.png
代码：
<div class="arrowWrap"></div>
<style>
.arrowWrap{
position: relative;
width: 100px;
height: 100px;
border:2px solid red;
margin: 20px;
}
.arrowWrap:before{
content: '';
width: 0;
height: 0;
position: absolute;
top: 10px;
left: -20px;
border: 10px solid transparent;
border-right-color: red;
}
/*白色的三角用以盖住红色的三角,漏出红三角的边边 嘿嘿嘿*/
.arrowWrap:after{
content: '';
width: 0;
height: 0;
position: absolute;
top: 12px;
left: -16px;
border: 8px solid transparent;
border-right-color: white;
}
</style>
参考链接：https://blog.csdn.net/u010585448/article/details/51865829
3、关于min-height：100%的使用
.parent{
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
font-size: 14px;
}
.child{
background-color: yellow;
}
效果：
image.png
此时父元素的盖度大于子元素内容高度，背景色出现了断层，解决方法是给子元素加上min-height:100%;
效果：（高于父元素）
image.png
效果：（低于父元素）
image.png
代码：
<div class="parent">
<div class="child">
我是一个小孩，我的高度不确定，我有自己的背景色~我的父亲也有背景色~
我的爸爸高100px,我想要内容高度低于父亲时，我的背景色是父亲的100%；
还想要内容多于父亲高度时，父亲出滚动条，而我的高度是自己的高度~
</div>
</div>
<style>
.parent{
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
font-size: 14px;
}
.child{
min-height: 100%;
background-color: yellow;
}
</style>
记于2018年8月13日。不加班的夜晚哈哈哈
