能用HTML/CSS解决的问题就不要使用JS：
http://www.codeceo.com/article/html-css-not-js.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
CSS中一些利用伪类、伪元素和相邻元素选择器的技巧：https://segmentfault.com/a/1190000007180315?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
CSS技巧（一）背景与边框：https://xxxgitone.github.io/2017/03/24/bg-border/
CSS技巧（二）形状：https://xxxgitone.github.io/2017/03/27/shape/
CSS技巧（三）视觉效果：https://xxxgitone.github.io/2017/04/01/css-secrets03-Visual-Effects/
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）：https://segmentfault.com/a/1190000004231995
CSS 无图片技术总结：https://segmentfault.com/a/1190000005608367
实用的60个CSS代码片段：http://www.jianshu.com/p/e878122a92a3
效果如图：
第一种：
HTML：
<div class="box1">
<em></em>
<span></span>
第一种
</div>
CSS：
.box1{
position: relative;
200px;
height: 100px;
padding: 10px;
margin: 20px auto;
border: 1px solid red;
border-radius: 5px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.box1 em, .box1 span {
position: absolute;
0;
height: 0;
font-size: 0;
line-height: 0;
border-style: solid;
*zoom:1;
border- 10px 8px;
left: 20px;
}
.box1 em{
border-color: transparent transparent red transparent;
top: -20px;
}
.box1 span{
border-color: transparent transparent #f7f7f7 transparent;
top: -19px;
}
第二种：
HTML：
<div class="box2">
<span class="bor">◆</span>
<span class="bor1">◆</span>
第二种
</div>
CSS：
.box2{
200px;
height: 100px;
padding: 10px;
border: 1px solid red;
border-radius: 5px;
margin: 20px auto;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.box2 .bor{
position: absolute;
left: 20px;
top: -9px;
color: red;
z-index: 10;
}
.box2 .bor1{
position: absolute;
left: 20px;
top: -8px;
color: #fff;
z-index: 100;
}
第三种：
HTML：
<div class="box3">
第三种
</div>
CSS：
.box3{
position: relative;
200px;
height: 100px;
padding: 10px;
border-radius: 5px;
margin: 20px auto;
background-color: #fed;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.box3:before{
content: "";
position: absolute;
top: -6px;
left: 20px;
padding: 5px;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Retina屏幕实现真正的1px边框：
<!-- html结构 --> <body> <div class="box retina-border rt-bd-all"></div> </body> /* css样式 */ .box { width: 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; } /* 去掉元素原有的边框 */ .retina-border { position: relative; border: none; } /* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/ .retina-border:after { content: ''; display: block; width: 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); } .rt-bd-all:after { border-width: 1px; } /* 如果只是想设置一条边框，可以这样改一下，以此类推 */ <!-- html结构 --> <body> <div class="box retina-border rt-bd-b"></div> </body> /* css样式 */ .tr-bd-b:after { border-bottom-width: 1px; } .tr-bd-t:after { border-top-width: 1px; } .tr-bd-l:after { border-left-width: 1px; } .tr-bd-r:after { border-right-width: 1px; }