CSS3 实现border边框渐变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			border:10px solid #ddd;
			border-image: -webkit-linear-gradient(#ddd, #000) 30 30;
			border-image: -moz-linear-gradient(#ddd, #000) 30 30;
			border-image: -o-linear-gradient(#ddd, #000) 30 30;
			border-image: linear-gradient(#ddd, #000) 30 30;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

显示效果如下图:

posted @ 2018-08-22 09:45  格鲁特baby  阅读(447)  评论(0编辑  收藏  举报