CSS小技巧

時間 2019-11-19

標籤 css 技巧欄目 CSS 简体版

原文原文鏈接

能用HTML/CSS解決的問題就不要使用JS：css

http://www.codeceo.com/article/html-css-not-js.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.comhtml

CSS中一些利用僞類、僞元素和相鄰元素選擇器的技巧：https://segmentfault.com/a/1190000007180315?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.comgit

CSS技巧（一）背景與邊框：https://xxxgitone.github.io/2017/03/24/bg-border/github

CSS技巧（二）形狀：https://xxxgitone.github.io/2017/03/27/shape/web

CSS技巧（三）視覺效果：https://xxxgitone.github.io/2017/04/01/css-secrets03-Visual-Effects/segmentfault

巧用margin/padding的百分比值實現高度自適應（多用於佔位，避免閃爍）：https://segmentfault.com/a/1190000004231995spa

CSS 無圖片技術總結：https://segmentfault.com/a/1190000005608367code

實用的60個CSS代碼片斷：http://www.jianshu.com/p/e878122a92a3orm

效果如圖：htm

第一種：
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;
}

1. CSS 小技巧
2. css 小技巧
3. css小技巧
4. CSS小技巧
5. Css 小技巧
6. HTML + CSS 小技巧
7. CSS樣式小技巧
8. css 使用小技巧
9. css小技巧積累
10. css的幾個小技巧
更多相關文章...
• Markdown 高級技巧 - Markdown 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• Docker容器實戰(一) - 封神Server端技術
• 三篇文章瞭解 TiDB 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。