CSS3学习笔记之边框颜色

最新推荐文章于 2021-09-10 12:00:33 发布

atleks

最新推荐文章于 2021-09-10 12:00:33 发布

阅读量740

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/atleks/article/details/38966893

版权

CSS2中的边框主要有三个类型值：

border-width: 设置元素边框的粗细

border-color: 设置元素边框的颜色

border-style: 设置元素边框的类型

这三个值中唯一需要的是border-style，否则边框样式起不到效果。

也可以为不同的边框设置不同的风格，遵守T/R/B/L原则（即Top，Right，Bottom，Left，可以理解为顺时针顺序），可以单独写为：

border-top-style, border-right-style, border-bottom-style, border-left-style

还有简写形式：

borer-style: solid /* 一个值时，表示四条边都solid类型 */

border-style: solid dotted /* 两个值时，第一个值表示元素上下边框类型，第二个值表示左右边框类型 */

border-style: solid dotted dash /* 三个值时，第一个值表示元素顶边的类型，第二个值表示元素左右边框类型，第三个值表示底部边框类型 */

border-style: solid dotted dashed inset /* 四个值时，第一个值表示元素顶边类型，第二个值表示元素右边类型，第三个值表示元素底边的类型，第四个值表示元素左边类型 */

边框颜色属性:

border-color属性语法如下:

border-color: <color> | transparent | initial | inherit

每个值的含义如下：

值	描述
color	设置背景颜色，默认颜色为黑色
transparent	设置背景颜色为透明
initial	将颜色值设置为默认值
inherit	从父元素继承颜色属性

如果想实现各个边框的颜色不一样或者每个边框有多重颜色，需要使用扩展写法如下：

border-top-colors: <color>[ <color>]*

border-right-colors: <color>[ <color>]*

border-bottom-colors: <color>[ <color>]*

border-left-colors: <color>[ <color>]*

上面语法的含义：如果边框的width被设置为n个像素，那么最多可以设置n个颜色，每个颜色的宽度为1px，例如，边框的宽度设置为10px，但是只设置了6组边框颜色，那么最后一组边框颜色将自动渲染剩余的宽度。

样例：

假设边框宽度已经被设置成了10px，下面设置顶部边框的颜色如下：border-top-colors: red green blue

含义：顶部边框包含三类颜色，红色，绿色和蓝色，红色和绿色宽度为一个像素，蓝色宽度为8个像素

由于CSS3的border-color属性还没有成为标准规范，为了让不同的浏览器能渲染正常，有必要加上前缀，如下表所示：

浏览器分类	浏览器	私有属性的前缀
Gecko引擎内核的浏览器	Mozilla（Firefox）	-moz-
Presto引擎内核的浏览器	Opera	-o-
KHTML引擎内核的浏览器	Konqueror	-khtml-
Trident引擎内核的浏览器	Internet Explorer	-ms-
Webkit引擎内核的浏览器	Chrome,Safari	-webkit-

例如，FF浏览器可以写成如下形式：

-moz-border-top-colors: #111 #222 #333 #444 #555

-moz-border-right-colors: #111 #222 #333 #444 #555

-moz-border-bottom-colors: #111 #222 #333 #444 #555

-moz-border-left-colors: #111 #222 #333 #444 #555

浏览器的兼容性：

对于border-color属性，大部分浏览器还都不支持，只有FF3.0+版本才支持其自己实现的版本。

样例

如下代码实现立体渐变边框效果：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试边框颜色</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				border: 10px solid transparent;
				border-radius: 15px 0 15px 0;
				-moz-border-top-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
				-moz-border-right-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
				-moz-border-bottom-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
				-moz-border-left-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

显示效果如下：

PS: 大家如果有问题欢迎给我在下面回复留言或者私信，我每天都会登录，会及时回复大家，多谢！

atleks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记之边框颜色

CSS2中的边框主要有三个类型值：border-width: 设置元素边框的粗细border-color: 设置元素边框的颜色border-style: 设置元素边框的类型这三个值中唯一需要的是border-style，否则边框样式起不到效果。也可以为不同的边框设置不同的风格，遵守T/R/B/L原则（即Top，Right，Bottom，Left，可以理解为顺时针顺序），可以单
复制链接

扫一扫