寫作背景：
覓兼職--登陸頁面，UI給的原型圖很漂亮，其中有一個圖要求div外面有一圈透明度為0.37且帶有漸變的邊框。效果圖如下：
在寫的時候遇到了一點小小的問題：無法給同一個div設置圓角的透明+漸變邊框。但是，又不能不做是不是，費了一番心思查資料，下面是解決方案：
1、分成兩個div疊加的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.one {
width: 300px;
height: 300px;
border-radius: 6px;
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.4) 10%, rgba(167, 166, 166, 0.6) 90%, rgba(150, 148, 148, 0.8) 95%, rgb(175, 173, 173) 100%);
margin: 0 auto;
padding: 50px;
}
.two {
width: 280px;
height: 280px;
background-color: rgb(158, 106, 106);
border-radius: 6px;
}
</style>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
效果圖：
