css怎么设置边框颜色_CSS

上一篇: css如何改变背景图片大小下一篇:css怎么设置多行超出显示省略号

css怎么设置边框颜色

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了css怎么设置边框颜色，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

方法：1、border-color属性同时设置四个边框的颜色；2、border-top-color、border-bottom-color、border-left-color、border-right-color属性分别设置上下左右边框。

css怎么设置边框颜色

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置边框颜色

方法1：使用border-color属性同时设置四个边框的颜色

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 280px;
				height: 62px;
				border-style:solid;
				border-color: red;
			}
		</style>	
	</head>
	<body>
		<div class="box">欢迎来到PHP中文网！</div>
	</body>
</html>

效果图：

css怎么设置边框颜色

方法2：分别设置上下左右边框

border-top-color属性：上边框颜色
border-bottom-color属性：下边框颜色
border-left-color属性：左边框颜色
border-right-color属性：右边框颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 280px;
				height: 62px;
				border-style:solid;
				border-top-color:red;
				border-bottom-color:paleturquoise;
				border-left-color:palevioletred;
				border-right-color:darkcyan;
			}
		</style>	
	</head>
	<body>
		<div class="box">欢迎来到PHP中文网！</div>
	</body>
</html>

效果图：

css怎么设置边框颜色

（学习视频分享：css视频教程）

以上就是css怎么设置边框颜色的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css怎么设置边框颜色全部内容，希望文章能够帮你解决css怎么设置边框颜色所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: css如何改变背景图片大小下一篇:css怎么设置多行超出显示省略号

猜你在找的CSS相关文章