国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<ul id="i2220"></ul>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/CSS 搞事技巧：border+transparent

CSS 搞事技巧：border+transparent

nifhlheimr 發布于2019-08-29 18:37 / 2367人閱讀

摘要：默認盒模型的正方形在上方已經說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵

介紹

出門忘帶電源線，快遞到了終于可以繼續水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當時處于懵逼狀態，錯過了大好的機會：

面試官：巴拉巴拉吧……

我：嗯，啊，這個，那（吱吱嗚嗚）……

面試官：你知道怎么繪制三角形嘛？

我：主要是利用了 border 和 transparent 這兩個屬性。其余邊設置為 transparent，然后將對應的方向設置為需要的顏色即可，一般常用等邊，等腰啊來裝飾一下。

面試官：那你知道不等邊三角形怎么寫嗎？

我：不就是那么寫么（陷入懵逼狀態），然后又迅速說用偽元素來模擬一下？

面試官：你分別設置下高度不就好了。

我：……

效果展示：

示例源碼、在線示例

三角形原理

通過圖形展示能夠更明顯顯示出區別：

1. 簡單的正方形

代碼：

$square-size = 100px

.square
  width $square-size
  height $square-size
  border 5px solid
  border-color #893615 #E76B56 #A72310 #0C1F22

效果圖：

加強一下效果：

$square-size = 100px
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22

可以清晰的看到每個邊都是一個梯形。

2. 檢查正方形

打開控制臺即可：

可以看到中間的空白即為我們設置的 100 * 100 ，這是由于我們的盒模型（box-sizing）為 content-box 導致的結果。

那我們將其設置為 border-box ，查看其結果：

由 border-box 可知，由于兩邊 border 大小為 60，所以 60*2=120 > 100，內部的 width 即為 0。

3. 默認盒模型的正方形

在上方已經說明了，正方形的 size 被擠壓為 0 時就會得到三角形的效果。

那么此處就在默認盒模型的情況下創建一個三角形：

$square-size = 0
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22

4. 隱藏不必的邊

最后，生成三角形就水到渠成了（保留目標相反方向的顏色），舉幾個例子。

三角形開角向上：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-bottom-color #A72310

三角形開角向右：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-left-color #0C1F22

三角形開角向左上：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-left-color #0C1F22
  border-top-color #893615

三角形生成器

每次還要想一想怎么寫三角形很麻煩，將其可視化，每次只需要點一點就創建一個三角形才是極好的。

友情提示：

以下涉及 Vue 相關概念

參考鏈接

0. 基本結構

.generate-triangle
  display flex
  .title
    margin 0
    padding 0
  .settings
    flex-basis 30%
  .exhibition
    flex auto
    background-color #cdd1d3 // 銀魚白

.settings
  display flex
  flex-direction column
  padding-top 12px
  .settings_direction,
  .settings_type,
  .settings_color
    display flex
    justify-content center
  .settings_type,
  .settings_color
    flex-basis 20%
  .settings_direction
    flex auto

.exhibition
  display flex
  flex-direction column
  padding-top 12px
  .rendering,
  .code
    display flex
    justify-content center
  .code
    flex-basis 35%
  .rendering
    flex auto

效果圖：

1. 方向選擇

在開始寫一個三角形時，需要確定這個三角的朝向，如向上、向下、或向左上。這時候我們就需要一個點擊的子組件來觸發效果了：

export default {
  name: "triangle-direction",
  data: () => {
    return {
      active: "oblique0",
      directions: [
        {
          name: "oblique",
          single: ["top", "right", "bottom", "left"]
        },
        {
          name: "positive",
          single: ["top-left", "top-right", "bottom-right", "bottom-left"]
        }
      ]
    };
  },
  mounted() {
    this.changeDirection("top", "oblique0");
  },
  methods: {
    changeDirection(val, index) {
      this.active = index;
      this.$emit("getDirection", val);
    }
  }
};

效果圖：

2. 類型選擇

此處將三角形分為三種：等邊三角形、等腰三角形、不等邊三角形。

類型選擇組件依賴于方向組件，需要驗證傳入的值，并且在不同的值會有不同的輸出結果。在上文解釋過，斜方向的三角形是由兩個 border 組成，所以這種類型的將不提供等邊的形式：

export default {
  name: "triangle-type",
  data: () => {
    return {
      active: 0,
      equilateral: false,
      triangleTypes: [
        {
          en: "equilateral",   
          zh: "等邊"
        },
        {
          en: "isosceles",
          zh: "等腰"
        },
        {
          en: "scalene",
          zh: "不等邊"
        }
      ]
    };
  },
  props: {
    type: {
      type: String,
      validator: function(val) {
        return [
          "top",
          "right",
          "left",
          "bottom",
          "top-left",
          "top-right",
          "bottom-left",
          "bottom-right"
        ].includes(val);
      }
    }
  },
  watch: {
    type: {
      handler: function(val) {
        const isPositive = ["top", "right", "left", "bottom"].includes(val);
        this.equilateral = isPositive;
        if (isPositive) {
          this.changeType("equilateral", 0);          
        } else {
          this.changeType("isosceles", 1);
        }
      },
      immediate: true
    }
  },
  methods: {
    changeType(item, index) {
      this.active = index;
      this.$emit("getType", item);
    }
  }
};

效果圖：

3. 顏色選取

現在 input 提供了 type="color" 這一選項，制作一個顏色選擇器還是很簡單的，對于 input 可以使用之前提及的 CSS 搞事技巧：checkbox+label+selector 來隱藏它：


  
     {{color}}

export default {
  name: "color-picker",
  data: () => {
    return {
      color: "#000000"
    }
  },
  mounted() {
    this.changeColor();
  },
  methods: {
    changeColor() {
      this.$emit("getColor", this.color);
    }
  }
}

效果圖：

4. 初步效果

效果圖來依賴于三個數據：方向、類型及顏色。依次適配這三個即可。

首先完成，方向及顏色問題，先初步看一下效果圖：

5. 寬高選取

在原理中說明了，三角形實際上是一個矩形隱藏了其余 border 形成的。以方向等邊三角形為例子：若需要邊長度為 50px 的的三角形，則根據勾股定理可得出：border-width: 0 28.87px 50px;

export default {
  name: "triangle-width",
  props: {
    type: {
      type: String,
      validator: function(val) {
        return ["equilateral", "isosceles", "scalene"].includes(val);
      }
    },
    direction: {
      type: String,
      validator: function(val) {
        return [
          "top",
          "right",
          "left",
          "bottom",
          "top-left",
          "top-right",
          "bottom-left",
          "bottom-right"
        ].includes(val);
      }
    }
  },
  data: () => {
    return {
      bottom: 50,
      sideOne: 50,
      sideTwo: 50,
      borderWidth: "",
      isPositive: false
    };
  },
  watch: {
    direction: {
      handler: function(val) {
        this.isPositive = ["top", "right", "left", "bottom"].includes(val)
        this.getBorder();
      },
      immediate: true
    },
    type: {
      handler: function() {
        this.getBorder();
      }
    }
  },
  methods: {
    getBorder() {
      let direction = this.direction;
      let type = this.type;
      switch(type) {
        case "equilateral":
          this.calcEquBorder(direction);
          break;
        case "isosceles":
          this.calcIsoBorder(direction);
          break;
        case "scalene":
          this.calcScaBorder(direction);
          break;
        default:
          break;
      }

      this.$emit("getBorderWidth", this.borderWidth);
    },
    calcEquBorder(direction) {
      let bottom = this.bottom;
      let height = (bottom / Math.sqrt(3)).toFixed(2);

      switch(direction) {
        case "top":
          this.borderWidth = `0 ${height}px ${bottom}px`;
          break;
        case "right":
          this.borderWidth = `${height}px 0 ${height}px ${bottom}px`;
          break;
        case "bottom":
          this.borderWidth = `${bottom}px ${height}px 0`;
          break;
        case "left":
          this.borderWidth = `${height}px ${bottom}px ${height}px 0`;
          break;
        default:
          break;
      }
    },
  }
};

效果圖：

6. 生成代碼

終于到了最后一步了，生成代碼有很多方式，可以將之前從子組件傳遞出來的數據處理下輸出。這里選擇一種較為取巧的形式，因為這邊使用的是行內 style 樣式，所以可以直接在它的 DOM 上獲取。

export default {
  methods: {
    postCode() {
      this.$nextTick(() => {
        let dom = this.$refs.triangleRendering;
        let code = dom.attributes.style.textContent;
        
        this.$emit("getCode", code);
      })
    }
  }
}

export default {
  name: "triangle-code",
  props: {
    code: {
      type: String,
      required: true
    }
  },
  watch: {
    code: {
      handler: function(code) {
        this.handleCode(code);
      },
      immediate: true
    }
  },
  data: () => {
    return {
      copyCode: ""
    }
  },
  methods: {
    handleCode(code) {
      code = code.replace(/;/g,";
");
      this.copyCode = `width: 0;
 height: 0;
 border: solid transparent;
 ${code}`;
    }
  }
}

效果圖：

最后

期間步驟只是思路過程，詳情請查看項目源碼，調試過程中不可避免會進行一些修改。

面試前還是要為面試刷下題目的，不然真的容易懵……

云服務器 GPU云服務器 css技巧 Transparent 禁用Transparent border

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114453.html

CSS 搞事技巧：hover+active

摘要：核心概念保存狀態。在上一篇搞事技巧中利用來加深了解了的彈性容器屬性，這一節是要利用來了解的彈性項目屬性。最后很多屬性我們可能難以理解其效果，個人認為運用來解釋不失為一種良好的方式。介紹在 JavaScript 中，我們可以利用變量，DOM 來保存狀態，而 CSS 當中，我們也可以利用偽類選擇器來保存狀態，這就是 CSS 搞事的核心了。核心概念：保存狀態。在上一篇 CSS 搞事技...

cangck_X 2019-08-30 15:43 評論0 收藏0
CSS 搞事技巧：checkbox+label+selector

摘要：列出這個兩個屬性的常用值看可知已經增加了更多的值代碼解讀該項目是通過來渲染的，所以會使用到的語法，不過此處僅使用的循環來解決重復書寫的問題該效果參考來源。接著使用布局來將它們分割，因為這次主要將的不是，所以就不進行闡述了。介紹其實這篇文章寫到一大半時它的名字還叫做《重溫 Flex 布局》，結果寫著寫著就走了心，附上一圖表示心情吧： showImg(https://segmentf...

alphahans 2019-08-30 15:43 評論0 收藏0
重溫 Flex 布局

摘要：而通過實現則簡單多了源碼原因解釋中間一欄為核心，所以需要優先渲染，結構也就放在了前面，主要是使用屬性將放置到前方。源碼的列數每列的個數函數原因解釋實現瀑布流還是比較簡單的。介紹這是關于 Flex 布局的實踐，原想還水一點字數來介紹 Flex 相關屬性，想想還是算了，阮一峰大佬的兩篇文章推上： Flex 布局教程：語法篇 Flex 布局教程：實例篇如何用 CSS 來增進對 Fl...

binta 2019-08-30 15:43 評論0 收藏0