等宽字体模拟边框类型实战实例页面

CSS代码：

.monospaced {
    width: 100px;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
}
                

HTML代码：

<p><strong>边框类型：</strong></p>
<select class="monospaced">
    <option value="solid" selected>———————</option>
    <option value="dashed">-------</option>
    <option value="dotted">·······</option>
</select>

<p id="border" class="border"></p>
                

JS代码：

var eleBorder = document.getElementById('border');
document.getElementsByTagName('select')[0].onchange = function() {
    eleBorder.style.borderStyle = this.value;    
};