CSS小技巧

能用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;
  width: 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;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-style: solid;
  *zoom:1;
  border-width: 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{
  width: 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;
  width: 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;
}　　
posted @ 2016-03-21 11:25  前端丶守望者  阅读(359)  评论(0)    收藏  举报