快速了解JavaScript選擇框操作

HTML中使用 <select> 和 <option> 元素創(chuàng)建選擇框。而 <select> 元素對(duì)應(yīng)的是 HTMLSelectElement 接口，<option> 元素對(duì)應(yīng)的是 HTMLOptionElement 接口。這兩個(gè)接口都是通過(guò) HTMLElement 接口從其他 HTML 元素共享所有屬性和方法。

先從 <select> 元素對(duì)應(yīng)的 HTMLSelectElement 接口開(kāi)始介紹專屬的屬性和方法。

autofocus：返回 boolean 值，表示控件在頁(yè)面加載時(shí)是否應(yīng)該具有輸入焦點(diǎn)，除非用戶覆蓋它。等價(jià)于 <select> 元素中的 autofocus 屬性。
disabled：返回 boolean 值，表示控件是否被禁用。等價(jià)于 <select> 元素中的 disabled 屬性。
form：返回 HTMLFormElement 值的只讀屬性，表示與此元素關(guān)聯(lián)的表單。
labels：與此元素關(guān)聯(lián)的 <label> 元素組成的 NodeList。
length：返回 number 值，表示 <select> 元素中 <option> 元素的數(shù)量。
multiple：返回boolean 值，表示是否允許多選，等價(jià)于<select> 元素中的 multiple 屬性。
name：返回 string 值，表示此控件的名稱。等價(jià)于 <select> 元素中的 name 屬性。
options：返回 HTMLOptionsCollection 值的可讀屬性，表示此元素包含的 <option> 元素集。
required：返回 boolean 值，表示用戶在提交表單之前是否需要選擇值。等價(jià)于 <select> 元素中的 required 屬性。
selectedIndex：返回 number 值，表示第一個(gè)選定的 <option> 元素的索引。值為 -1 表示未選擇任何元素，對(duì)于允許多選的列表，始終是第一個(gè)選項(xiàng)的索引。
selectedOptions：返回 HTMLCollection 值的可讀屬性，表示所選的 <option> 的元素集。
size：返回 number 值，表示控件中可見(jiàn)項(xiàng)的數(shù)量。等價(jià)于 <select> 元素的 size 屬性。默認(rèn)值為 1，如果 multiple 為 true ，則為 4。
type：返回 string 值的只讀屬性，表示表單控件類型。當(dāng) multiple 為 true 時(shí)，它返回 "select-multiple"，否則返回 "select-one"。
validationMessage：返回 string 值的只讀屬性，表示一個(gè)本地化消息，描述了控件不滿足的驗(yàn)證約束。如果willvalidate=false，或者它滿足其約束，則此屬性為空字符串。
validity：返回 ValidityState 的只讀屬性，表示該控件所處的有效狀態(tài)。
value：返回 string 值，表示表單控件的值。返回 option 元素的 value 屬性，如果沒(méi)有該屬性，則返回 text 屬性。
willValidate：返回 boolean 值的只讀屬性，表示該按鈕是否是約束驗(yàn)證的候選者。如果任何條件禁止約束驗(yàn)證，則為 false。
add(elemen, before)：將 element 元素添加到 before 元素之前。element 參數(shù)為要添加的 <option> 元素， before 參數(shù)為已存在的 <option> 元素，before 為可選參數(shù)。
checkValidity()：檢查元素是否有任何約束以及它是否滿足它們。如果元素未通過(guò)約束，瀏覽器將在元素處觸發(fā)可取消的 invalid 事件并返回 false。
item(index)：從 <select>元素的 options 集合中獲取一個(gè) <option> 元素。
namedItem(name)：獲取具有指定名稱的 options 集合中的 <option> 元素。而傳入的 name 參數(shù)可以匹配 <option> 元素的 id 或 name 屬性。
remove(index)：從 <select> 元素的 options 集合中刪除指定索引處的元素。
reportValidity()：此方法向用戶報(bào)告元素約束的問(wèn)題。如果有問(wèn)題，它會(huì)在元素處觸發(fā)可取消的 invalid 事件，并返回 false；如果沒(méi)有問(wèn)題，則返回 true。
setCustomValidity(error)：將 <select> 元素的自定義有效性消息設(shè)置為指定的消息。使用空字符串表示元素不具有自定義有效性錯(cuò)誤。

下面介紹一下<select> 元素根據(jù)不同選中狀態(tài)下的value屬性的值：

<select name="location" id="selLocation">
    <option value="Sunnyvale, CA">Sunnyvale</option>
    <option value="Los Angeles, CA">Los Angeles</option>
    <option value="Mountain View, CA">Mountain View</option>
    <option value="">China</option>
    <option>Australia</option>
</select>

當(dāng)選中選項(xiàng)框中的第一項(xiàng)時(shí)，<select> 元素的 value 值為 "Sunnyvale, CA"；而選中第四項(xiàng)時(shí)，<select> 元素的 value 值為 ""，因?yàn)樵擁?xiàng)的 value 屬性是空字符串；選中最后一項(xiàng)，則 value 值為 "Australia"，因?yàn)樵?<option> 元素沒(méi)有指定 value 屬性。

因此，根據(jù)以上的例子，<select> 元素的value屬性根據(jù)以下規(guī)則獲取值：

無(wú)選中項(xiàng)，<select> 元素的 value 屬性為空字符串。
有一個(gè)選中項(xiàng)，且其 value 屬性有值，則 <select> 元素的 value 屬性的值為 <option> 元素的 value 屬性的值。
有一個(gè)選中項(xiàng)，且其 value 屬性沒(méi)有指定值，則 <select> 元素的 value 屬性的值是 <option> 元素的 text 值。
有多個(gè)選中項(xiàng)，則 <select> 元素的值會(huì)獲取第一個(gè) <option> 元素的value值或 text 值。

再介紹 <option> 元素對(duì)應(yīng)的 HTMLOptionElement 接口專屬屬性和方法。

defaultSelected：返回 boolean 值。表示默認(rèn)情況下是否被選中。
disabled：返回 boolean 值。表示該選項(xiàng)不可用，等價(jià)于 <option> 元素的 disabled 屬性的值。
form：返回 HTMLFormElement 值的只讀屬性。如果 <option> 是 <select> 元素的后代，表示與相應(yīng) <select> 元素的 form 值相同的值，如果不是，則為 null。
index：返回 string 的只讀屬性。表示選項(xiàng)在 options 集合中的索引。
label：返回 string 的只讀屬性。表示 <option> 元素的標(biāo)簽，等價(jià)于 <option> 元素的 label 屬性。如果未設(shè)置此屬性，則讀取該屬性將返回元素的文本內(nèi)容。
selected：返回 boolean 值，表示當(dāng)前是否選擇了該選項(xiàng)。
text：返回 string 值。表示選項(xiàng)的文本值。
value：返回 string 值。表示選項(xiàng)的值。等價(jià)于 <option> 元素的 value 屬性。

這里強(qiáng)調(diào)一下，<select> 元素的 change 事件與其它表單字段是不一樣的。其它表單字段會(huì)在自己的值改變后觸發(fā) change 事件，然后字段失去焦點(diǎn)。而 <select> 會(huì)在選中一項(xiàng)時(shí)立即觸發(fā) change 事件。

選項(xiàng)處理

對(duì)于只允許選擇一項(xiàng)的 <select> 元素，獲取選項(xiàng)最簡(jiǎn)單的方式是使用 <select> 元素的 selectIndex 屬性，如下面的例子：

let selectedOption = selectbox.options[selectbox.selectedIndex];

獲取到 <option> 元素后，就可以根據(jù) <option> 元素的屬性和方法獲取想要的信息。

對(duì)于允許多選的 <select> 元素，selectedIndex 屬性就像只允許選擇一項(xiàng)一樣。設(shè)置 selectedIndex 會(huì)移除所有選項(xiàng)，只選擇指定的項(xiàng)，而獲取 selectedIndex 只會(huì)返回選中的第一項(xiàng)的索引。

選項(xiàng)還可以通過(guò)取得選項(xiàng)的引用并將其 selected 屬性設(shè)置為 true 來(lái)選中。例如，以下代碼會(huì)選中 <select> 的第一項(xiàng)：

selectbox.options[0].selected = true;

與 selectedIndex 不同，設(shè)置選項(xiàng)的 selected 屬性不會(huì)在多選時(shí)移除其他選項(xiàng)，從而可以動(dòng)態(tài)選擇任意多個(gè)選項(xiàng)。如果修改單選框中選項(xiàng)的 selected 屬性，則其他選項(xiàng)會(huì)被移除。要注意的是，把 selected 屬性設(shè)置為 false 對(duì)單選框沒(méi)有影響。

通過(guò) selected 屬性可以確定選擇框中哪個(gè)選項(xiàng)被選中。要取得所有選中項(xiàng)，需要循環(huán)選項(xiàng)集合逐一檢測(cè) selected 屬性，比如：

function getSelectedOptions(selectbox){
    let result = new Array();
    for (let option of selectbox.options) {
        if (option.selected) {
            result.push(option);
        }
    }
    return result;
}

添加選項(xiàng)

可以使用 JavaScript 動(dòng)態(tài)創(chuàng)建選項(xiàng)并將它們添加到選擇框。首先，可以使用 DOM 方法，如下所示：

let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

以上代碼創(chuàng)建了一個(gè)新的<option>元素，使用文本節(jié)點(diǎn)添加文本，設(shè)置其 value 屬性，然后將其添加到選擇框。添加到選擇框之后，新選項(xiàng)會(huì)立即顯示出來(lái)。

瀏覽器原生提供 Option() 構(gòu)造函數(shù)創(chuàng)建 HTMLOptionElement 實(shí)例：

new Option(text, value, defaultSelected, selected) : HTMLOptionElement

text：一個(gè)可選的 string 值參數(shù)，表示該選項(xiàng)的文本內(nèi)容。如果省略，返回空字符串。
value：一個(gè)可選的 string 值參數(shù)，表示該選項(xiàng)的值。如果省略，默認(rèn)返回 text 屬性的值。
defaultSelected：一個(gè)可選的 boolean 值參數(shù)，表示該項(xiàng)是否默認(rèn)選中，默認(rèn)為 false。注意，即使設(shè)為 true，也不代表該項(xiàng)的 selected 屬性為 true。
selected：一個(gè)可選的 boolean 值參數(shù)，表示該項(xiàng)是否選中。默認(rèn)為 false。

來(lái)看案例：

let newOption = new Option("Option Text", "Option Value", true);

創(chuàng)建之后，需要將該實(shí)例添加到 HTML 的 <select> 元素中，這里有兩種添加方法：

DOM 操作中的 appendChild() 方法。
HTMLSelectElement 接口中的 add() 方法。

這里詳細(xì)介紹下 add() 方法：

add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;

element：一個(gè) HTMLOptionElement 或 HTMLOptGroupElement 元素的參數(shù)。
before：可選的參數(shù)，是集合中的一個(gè)元素或者類型為 number 的索引，表示在 element 參數(shù)之前插入。如果傳入的是 null 或索引不存在，新元素會(huì)添加在集合的末尾。

如果想要符合所有瀏覽器的規(guī)范，可以傳入 undefined 作為第二個(gè)參數(shù)。

let newOption = new Option("Option text", "Option value", true);
selectbox.add(newOption, undefined);

這里注意一下 defaultSelected 和 selected 兩個(gè)參數(shù)，有時(shí)候容易弄混。selected 屬性為 true 時(shí)，該 <option> 當(dāng)前狀態(tài)處于已選擇狀態(tài)。defaultSelected 屬性為 true 時(shí)，表示 <option> 在默認(rèn)情況下為已選擇狀態(tài)，但不代表 <option> 的當(dāng)前狀態(tài)是已選擇狀態(tài)。當(dāng)頁(yè)面重置時(shí)，selected 屬性值為 true 的 <option> 可能會(huì)變成未選擇狀態(tài)，而 defaultSelected 屬性值為 true 的 <option> 則一定會(huì)變成已選擇狀態(tài)。

移除選項(xiàng)

移除 <option> 元素的方法也不止一種，下面列舉的方法都可以實(shí)現(xiàn)：

DOM 操作中的 removeChild() 方法。
HTMLSelectElement 接口中的 remove() 方法。傳入的參數(shù)為要移除的 <option> 元素的索引。
直接將指定 <option> 元素賦值為 null。如 selects.options[1] = null。

要清除選擇框的所有選項(xiàng)，需要迭代所有選項(xiàng)并逐一移除它們，如下面例子所示：

function clearSelectbox(selectbox) {
    for (let index = 0; index < selectbox.options.length;) {
        selectbox.remove(0);
    }
}

移動(dòng)和重排選項(xiàng)

使用 DOM 操作中的 appendChild() 方法實(shí)現(xiàn)從一個(gè) <select> 元素中將 <option> 移到另一個(gè) <select> 元素中，這種實(shí)現(xiàn)方法會(huì)將 <option> 元素先從其父元素中移除，然后再插入指定位置。如下所示：

let selectbox1 = document.getElementById("selLocations1");
let selectbox2 = document.getElementById("selLocations2");
selecbox2.appendChild(selectbox1.options[0]);

移動(dòng)選項(xiàng)和移除選項(xiàng)都會(huì)導(dǎo)致每個(gè) <option> 的 index 屬性重置。

重排 <option> 的話，使用 DOM 操作中的 insertBefore() 方法，而移到最后位置，還是使用 appendChild() 方法較為方便。

下面的代碼演示了將一個(gè) <option> 在 <select> 中前移一個(gè)位置：

let optToMove = selectbox.options[1];
selectbox.insertBefore(optToMove, selectbox.options[optionToMove.index-1]);

這個(gè)例子首先獲得要移動(dòng) <option> 的索引，然后將其插入之前位于它前面的 <option> 之前，其中第二行代碼適用于除第一個(gè) <option> 之外的所有 <option>。下面的代碼則可以將<option>向下移動(dòng)一個(gè)位置：

let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,
selectbox.options[optionToMove.index+2]);

總結(jié)

<select> 和 <option> 是在 HTML 頁(yè)面布局時(shí)，經(jīng)常使用的表單控件，學(xué)會(huì)使用與之對(duì)應(yīng)的 HTMLSelectElement 和 HTMLOptionElement 接口中的屬性和方法會(huì)很容易的操控 <select> 和 <option> 元素。借助于 DOM 操作 <select> 和 <option> 也較為方便。

置邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規(guī)的方法了，今天再來(lái)說(shuō)說(shuō)其他兩種方法，

outline方式
background方式

outline方法

這也算是一種比較常規(guī)的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點(diǎn)區(qū)別的，同時(shí)對(duì)比下：

border: 1px dashed #333;
outline: 1px solid;

外部實(shí)線是outline，內(nèi)部虛線是border，為了一致，可以設(shè)置outline-offset往內(nèi)縮一點(diǎn)：

outline-offset: -1px;

background方法

這是本文的重點(diǎn)，我也是剛get到此項(xiàng)技能，之前一直不知道background居然如此強(qiáng)大，直接上代碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這里我們只設(shè)置了上面看，而且還是虛線的，做一說(shuō)明這種方式的強(qiáng)大，再把其他邊框補(bǔ)上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可見(jiàn)，使用background非常的靈活，邊框的位置可以任意調(diào)整。

現(xiàn)在我們已經(jīng)掌握這幾方式，但本文的重點(diǎn)是上面這種，我們現(xiàn)在來(lái)動(dòng)手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滾動(dòng)虛線邊框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滾動(dòng)漸變

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是設(shè)置邊框的幾個(gè)小技巧。

參考：
https://www.cnblogs.com/coco1s/p/14291567.html

order 盒子邊框

復(fù)合屬性。設(shè)置對(duì)象邊框的特性。
盒子邊框三要素：
① 邊框粗細(xì)
② 邊框樣式
③ 邊框顏色

語(yǔ)法：border: border-width | border-style | border-color ;

邊框四邊的粗細(xì)、樣式、顏色，以及上下左右每個(gè)位置的樣式屬性都是可以單獨(dú)調(diào)整的。

邊框的顏色不是必要的，如果不指定顏色，默認(rèn)顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

邊框樣式

使用 border-style 可為盒子邊框設(shè)置樣式，以下示例為實(shí)線

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可單獨(dú)針對(duì)某一方向設(shè)置邊框樣式

示例 CSS 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實(shí)線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點(diǎn)線)

border-style 說(shuō)明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設(shè)置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說(shuō)下面這段代碼，上下實(shí)線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋none無(wú)輪廓。 border-color將被忽略，border-width計(jì)算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點(diǎn)狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實(shí)線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓

邊框粗細(xì)

使用 border-width 可為盒子邊框設(shè)置粗細(xì)，以下示例邊框?yàn)?5px 粗細(xì)

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可單獨(dú)針對(duì)某一方向設(shè)置邊框粗細(xì)

示例 CSS 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實(shí)線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點(diǎn)線)

border-width 說(shuō)明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-style設(shè)置為none或hidden，border-width的使用值將為0。

如果需要設(shè)置不同方向的邊框粗細(xì)，可以寫在一句 CSS 代碼里。

比如說(shuō)下面這段代碼，上下2px，右2px，左5px。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

邊框顏色

可直接輸入
顏色的英文名稱
rgb值
十六進(jìn)制

使用 border-color 可為盒子邊框設(shè)置顏色，以下示例邊框顏色為紅色。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可單獨(dú)針對(duì)某一方向設(shè)置邊框顏色

示例 CSS 代碼

上邊：border-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說(shuō)明

如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
如果border-width等于0或border-style設(shè)置為none，本屬性將被忽略。

上面有兩個(gè)示例講述如何設(shè)置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復(fù)合屬性

如果你需要同時(shí)設(shè)置盒子的粗細(xì)、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個(gè)屬性：粗細(xì)、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個(gè)三角形

先來(lái)看一個(gè)示例

 /* CSS代碼 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

細(xì)心的你，一定發(fā)現(xiàn)了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設(shè)置為 0

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四個(gè)三角形一樣。

我們只需要把上邊和左右兩邊的三角形隱藏起來(lái)，它不就是一個(gè)三角形了。

為 border-color 指定 transparent 值，使盒子邊框顏色變透明

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三條邊透明之后，就只剩一個(gè)三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

在線咨詢

上一篇：為HTML頁(yè)面添加視頻、音頻的方法-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：TikTok聯(lián)手Zynga推出一款基于HTML5打造的手機(jī)游戲

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

快速了解JavaScript選擇框操作

選項(xiàng)處理

添加選項(xiàng)

移除選項(xiàng)

移動(dòng)和重排選項(xiàng)

總結(jié)

outline方法

background方法

漸變邊框

滾動(dòng)虛線邊框

滾動(dòng)漸變

初始 HTML

邊框樣式

可單獨(dú)針對(duì)某一方向設(shè)置邊框樣式

border-style 說(shuō)明

border-style 樣式屬性值

邊框粗細(xì)

可單獨(dú)針對(duì)某一方向設(shè)置邊框粗細(xì)

border-width 說(shuō)明

邊框顏色

可單獨(dú)針對(duì)某一方向設(shè)置邊框顏色

border-color 說(shuō)明

border 是復(fù)合屬性

教你用 CSS 畫個(gè)三角形

您的項(xiàng)目需求