标签归档：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，那么采用在其外面包一层元素的方法来实现。