css筆記 - 張鑫旭css課程筆記之 border 篇

時間 2020-05-02

標籤 css 筆記課程 border 欄目 CSS 简体版

原文原文鏈接

border地址css

border特性:

能造成BFC可是不能清除浮動。可是bfc也是把子元素的margin包裹進來，可是拿本身的margin穿透沒辦法的。html
邊框寬度不支持百分比瀏覽器
透明border能夠突破可視區域的限制佈局

border-style:double巧用

double能夠利用來配合border-style：solid製做三條槓小icon 具體代碼見下邊spa

border-style:dotted來作圓

<h3>原理：border-style:dotted在ie中是圓點，在其餘瀏覽器是小方點</h3>
  <h3>內聯元素須要把自身高度先去掉</h3>
  <div class="box2">
    <span class="dot2">圓</span>
  </div>
  <h3>內聯元素不去掉自身高度，就得轉化爲塊元素。兼容到ie7</h3>
  <div class="box1">
    <span class="dot1">圓</span>
  </div>
  <h3>block元素不用作任何處理，直接border便可</h3>
  <div class="box3">
    <div class="dot3">圓</div>
  </div>
  <span class="dot"></span>

  <div class="ever">
    <div class="dots">任意圓角</div>
    <div class="area">區域</div>
  </div>

.dot {
      background: green;
      padding: 20px;
      /* 這樣，元素寬40，高61。即便是一個空文本。 */
    }

    .box1 {
      width: 150px;
      height: 150px;
      overflow: hidden;
    }

    .dot1 {
      display: block;
      width: 100%;
      height: 100%;
      /* 解決內聯元素不可見內容的高度 */
      border: 150px dotted red;
    }

    .box2 {
      margin: 10px 0;
      width: 150px;
      height: 150px;
      overflow: hidden;
      font-size: 0;
      /* 解決內聯元素不可見內容的高度 */
    }

    .dot2 {
      border: red 150px dotted;
    }

    .box3 {
      width: 150px;
      height: 150px;
      overflow: hidden;
    }

    .dot3 {
      border: 150px dotted red;
    }
   .ever {
      width: 380px;
      /* overflow: hidden; */
    }

    .dots {
      border: 150px dotted palevioletred;
    }

    .area {
      width: 335px;
      background: palevioletred;
      margin-top: -300px;
      margin-left: 22px;
      height: 279px;
    }

border-color : 默認顏色就是color

利用這個原理，用border作的icon，能夠在hover時只改變color顏色值便可。示例： <div class="add"></div>code

<style>
    .add{
      position: relative;
      width: 120px;
      height: 120px;
      margin: 200px;
      color: #ccc;//border的顏色來自於此
      border: 1px solid;
      transition: color .5s;
    }
    .add::before,.add::after{
      content: "";
      width: 60px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 50%;
    }
    .add::before{
      margin-top: -5px;
      margin-left: -30px;
      border-top: 10px solid;
    }
    .add::after{
      margin-top: -30px;
      margin-left: -5px;
      border-left: 10px solid;
    }
    .add:hover{
      color: red;//hover的時候只須要修改color便可
      cursor: pointer;
    }
  </style>

border應用

1. 三條槓

橫向效果： htm

<div></div>

div {
    width: 200px;
    position: relative;
    border: 1px solid;
    padding: 51px 40px;
}
div::after {
    content: "";
    display: block;
    height: 30px;
    border-top: 90px double;
    border-bottom: 30px solid;
}

豎排效果： blog

<div class="shu"></div>

div.shu {
    height: 150px;
    width: 150px;
    position: relative;
    border: 1px solid;
    padding: 51px 40px;
}
div.shu::after {
    content: "";
    display: block;
    border: 0;
    width: 30px;
    border-right: 90px double;
    border-left: 30px solid;
    height: 150px;
}

2. 加號icon （能夠用僞元素的寬高實現）

代碼：get

<div class="add">
  </div>
  <style>
    .add{
      position: relative;
      width: 120px;
      height: 120px;
      margin: 200px;
      color: #ccc;
      border: 1px solid;
      transition: color .5s;
    }
    .add::before,.add::after{
      content: "";
      width: 60px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 50%;
    }
    .add::before{
      margin-top: -5px;
      margin-left: -30px;
      border-top: 10px solid;
    }
    .add::after{
      margin-top: -30px;
      margin-left: -5px;
      border-left: 10px solid;
    }
    .add:hover{
      color: red;
      cursor: pointer;
    }
  </style>

3. 小三角效果、梯形效果

<div class="trans"></div>
  <div class="trans2"></div>
  <div class="trans3"></div>
  <div class="trans4"></div>
  <div class="trans5"></div>

div{
      margin: 2px;
    }
    .trans{
      width: 200px;
      height: 200px;
      border: 60px solid;
      border-top-color: #fff6b9;
      border-right-color: #aaffb4;
      border-bottom-color: #fbb6e7;
      border-left-color: #ffd07a;
    }
    .trans2{
      width: 200px;
      border: 60px solid;
      border-top-color: #fff6b9;
      border-right-color: #aaffb4;
      border-bottom-color: #fbb6e7;
      border-left-color: #ffd07a;
    }
    .trans3{
      width: 0px;
      height: 0px;
      border: 100px solid;
      border-top-color: #aaffb4;
      border-right-color: #fff6b9;
      border-bottom-color: #fbb6e7;
      border-left-color: #ffd07a;
    }
    .trans4{
      width: 0px;
      height: 0px;
      border: 100px solid;
      border-top-color: #fff6b9;
      border-right-color: transparent;
      border-bottom-color: #fbb6e7;
      border-left-color: transparent;
    }
    .trans5{
      width: 0px;
      height: 0px;
      border: 100px solid;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: #fbb6e7;
    }

4. 模擬圓角效果

利用border-top和border-bottom的兩端斜邊效果

<h3>模擬圓角效果：</h3>
  <div class="top"></div>
  <div class="cont">中間部分</div>
  <div class="bottom"></div>
  <h3>分解圖：</h3>
  <div class="top top1">border-bottom</div>
  <div class="cont cont1">中間部分</div>
  <div class="bottom bottom1">border-top</div>

div{
      width: 200px;
      border: 3px solid transparent;
    }
    .top{
      border-bottom-color: red;
    }
    .cont{
      height: 56px;
      background: red;
      border-color: red;
    }
    .bottom{
      border-top-color: red;
    }
    .cont1{
      border-width: 30px;
    }
    .top1{
      border-width: 30px;
      border-bottom-color: rgb(83, 0, 0);
    }
    .bottom1{
      border-width: 30px;
      border-top-color: rgb(83, 0, 0);
    }

5. 使用透明邊框增長可點擊區域的大小，兼容到ie7+；

利用原理：透明border能夠突破可視區域的限制，原邊框用盒陰影製做

6. 增長圖標的可渲染區域：

png圖標是能夠設置顏色的;it

icon{filter:drop-shadow(20px 0 #000);}

佈局應用：

border等高佈局 (不支持百分比結構)

<div class="box">
    <div class="left">
      <ul>
        <li>1</li>
        <li>12414</li>
        <li>12414</li>
        <li>12414</li>
        <li>12414</li>
        <li>12414</li>
        <li>12414</li>
        <li>12414</li>
      </ul>
    </div>
    <div class="right">
      <article>問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a問猴子那個a</article>
    </div>
  </div>

.box{
      border-left: 200px solid black;
      background: #f5f5f5;
      color: #fff;
      clear:both;
    }
    .right{
      color: #000;
    }
    .left{
      float: left;
      width: 200px;
      margin-left: -200px;
    }

2018-08-29 14:57