最近在做乙個小專案時，前端需要乙個三角形形狀的樣式，就上網搜了一下css三角形教程，按照這些教程來操作，確實能做出符合條件的三角形，但是這些教程大多都是直接提供相應的引數，並沒有提及引數的意義以及為什麼要這樣設定引數，下面我從我自己的使用過程來談談我對border的認識
border的基本性質
我們先來看乙個運用border的例項：
我們可以看到，f12顯示這個div元素的尺寸是60x50，那麼這個60和50是怎麼來的呢？
以下邊為例：
可以看到，它的邊可以劃分為三部分，首先是左border的寬度(20px)，div的width(20px)，以及右border的寬度(20px)，所以長為60px。
再以右邊為例：
可以看到，右邊的長度也可以劃分為三部分，首先是上border的寬度(20px)，div的height(10px)，以及下border的寬度(20px)，所以寬為50px
通過上面的分析，我們可以得出乙個結論，乙個border的長是由三個部分組成的，依賴於這三部分，這三部分值的變化就造成了border形狀的變化，我們一開始談及的三角形，就是令div的width為0：
可以看到上邊和下邊都變成了三角形
再將height設為0：
可以看到，現在四個border都變成了三角形，那麼現在上/下邊的長度我們可以推算一下，應該是40px，左/右邊也應該是40px
如果這個時候我們令右border的寬度為0會發生什麼呢？
可以看到，右border直接消失，然後上/下border都發生了變化，只有左border沒有受影響，這就是我們前面所提及的「依賴」，上border依賴於左、右border的寬度，下border也依賴於左、右border的寬度，當右border的寬度發生變化時，上下border的形狀都會發生變化，而左border依賴的上、下border的寬度都沒有改變，所以它的形狀不會改變
如果現在，我們把左border變為0，又會發生什麼呢？
可以看到，border全部消失了，就算上border和下border有設定值，但因為缺少了左右border，div的width也為0，就導致了構成其三角形的底為0，只剩高20px，所以這樣是構不成乙個實體的三角形的。所以形成了上圖的0x40（40=20（上border）+20（下border））
總結當我們使利用css的border來進行三角形的繪製的時候，我們可以先將三角形的底進行分解，然後進而確定其他三邊border的值
利用flex製作篩子
如果對flex布局不了解的或是有疑問的 核心 display flex flex direction column align items center justify content center justify content space around display flex 設定元素為彈性布...
css border製作三角形 圓角框等的使用
透明 ie6瀏覽器不支援transparent透明屬性，就border生成三角技術而言，直接設定對應的透明邊框的border style屬性為 dotted或是dashed即可解決這一問題，原因是在ie6下,點線與虛線均以邊框寬度為基準，點線長度必須是其寬度的3倍以上 height border w...
利用SandCastle製作類似MSDN的幫助
因為需要生成公司公用類庫的幫助文件,這幾天來,我一直在研究sandcastle,現在把我使用的心得說一下,權當記錄,留作以後查閱方便.在使用sh中有一些細節需要注意 1 使用sh之前需要確認已經安裝sandcastle和html help workshop 2 html help workshop的...