如何用css定义div的边框颜色

Posted 2023-04-11

如何用css定义div的边框颜色

我比较喜欢用简写的，给你列一下简写的边框样式吧：
border:1px solid #FF0000;
表示4条边都是1像素直线边框，红色。
1px表示边框宽度，solid表示直线（虚线可以用dashed），#FF0000是颜色值（这个不用我多说了吧）

如果要定义4条边都不一样，那么用：
border-top:
border-right:
border-bottom:
border-left:

分别表示上右下左的边框，后面的值参照border就可以了。 参考技术A 如下面的例子：
border-style:solid; border-width:1px; border-color:#000
下面是设置必要掌握的代码：

border-color:#000（设置4边边框颜色为黑色）
border-color:+颜色值，即可设置对象边框颜色
border-left-color:#000 设置左边框颜色为黑色
border-right-color:#000 设置右边框颜色为黑色
border-top-color:#000 设置上边框颜色为黑色
border-bottom-color:#000 设置下边框颜色为黑色

如何用css使边框颜色渐变

一、CSS3 中的边框颜色 这里是一个10px宽的标准边框和边框颜色： #borderColor border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; 二、有圆角的边框颜色 #borderColorCorner border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; 参考技术A background-color:#a0a #909 #808 #707 #606 #505 #404 #303;

background -color 属性的参数很简单，可以是任意合法的颜色值或颜色值列表，当background -color只设置了一个颜色时，那么就是单色的。如果设置了n中颜色而边框宽度也为n的话那么每一个像素显示一种颜色，如果边框宽度值大于颜色数值时，最后一种颜色用于显示剩下的宽度。 参考技术B 浏览器兼容性不好，注意使用