标签归档:border

border 与三角形

border,无处不在,针对三角形作个备忘。

1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下,border 的颜色是跟随字体颜色来的。
2. background 的覆盖范围是包括 border 的,所以在 border 的颜色是透明时,将显示 background。

紧跟着的图片的页面来源是 JS Bin 上的一个 demo

border 是包成一个矩形的,如下图左上。但单个 border 是如何的呢,可以看下图右上,可以看到对于交接处是采用对分的形式的。由于 background 的作用范围,所以左下图把右 border 设为透明后,显示出黑色的背景来。右下,在把 background 也设为透明后,border 处显示出更下方的内容了。

继续阅读

Submit 按钮在低版本 IE 下的黑边框

对于下面这段代码,当 focus 表单(如输入框)时,提交按钮在 IE 6/7 中将会出现一个黑色边框。

<style>
input{border:1px solid red;}
</style>

<form>
    <input type="text" value="" />
    <input type="submit" value="submit" />
</form>

如果需要对按钮做美化,保持各浏览器一致(比如设定背景和border等),那么需要处理这个问题。

解决方法是:把 submit 按钮的 border 设为 none,然后如果需要 border,那么采用在其外面包一层元素的方法来实现。