渐变的边框最开始考虑用border，但是后来考虑还是用background最实际，设置padding值就可以保证有padding值宽度的边框了
比较简陋的一个demo
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gradient border with radius</title>
<style>
.bg-decoration {
border-radius: 8px;
margin-top: 30px;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #000;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.bg-decoration:hover {
background: linear-gradient(to bottom, #000, #fff);
}
.content-box {
background: #fff;
border-radius: 8px;
font-size: 18px;
padding: 5px;
box-sizing: border-box;
}
.sm-wrap {
width: 100px;
height: 100px;
}
.md-wrap {
width: 200px;
height: 200px;
}
.lg-wrap {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="sm-wrap">
<div class="bg-decoration">
<div class="sm-con content-box">this is a small size div element.</div>
</div>
</div>
<div class="md-wrap">
<div class="bg-decoration">
<div class="md-con content-box">this is a middle size div element.</div>
</div>
</div>
<div class="lg-wrap">
<div class="bg-decoration">
<div class="lg-con content-box">
this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.this is a large size div element.
</div>
</div>
</div>
</body>
</html>
image.png
网友评论