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日。不加班的夜晚哈哈哈