之前渐变色边框我一直都是用的border-image,但是只有两条边,如果是4条边的话可以用
radial-gradient放射性渐变尝试一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3渐变色边框</title>
<style type="text/css">
.wrap {
width: 400px;
height: 400px;
background-image:radial-gradient(blue,white);
padding:1px;
}
.inner {
background-color: rgba(255,255,255,1);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="" class="wrap">
<div id="" class="inner" >
</div>
</div>
</body>
</html>
这个方法还是有缺点,当背景是深色的时候效果不明显,还需要额外套一层div,而且我始终觉得应该有更简单,不知道有没有大神指教一下。