linear-gradient屬性製作邊框程式碼例項

admin發表於2017-03-05

本章節分享一段程式碼例項，它利用linear-gradient屬性製作邊框功能。

linear-gradient屬性可以參閱css3 linear-gradient線性漸變一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>  
<style>     
.box {     
  margin:80px 30px;     
  width:200px;     
  height:200px;     
  position:relative;     
  background:#fff;     
  float: left;     
}     
.box:before {     
  content: '';     
  z-index: -1;     
  position: absolute;     
  width: 220px;     
  height: 220px;     
  top: -10px;     
  left: -10px;     
}     
.first:before {     
  background-image: linear-gradient(90deg, yellow, gold);     
}     
.second:before {     
  background-image: linear-gradient(0deg, orange, red);     
}     
.third:before {     
  background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
}     
</style>     
</head>     
<body>     
    <div class="box first"></div>     
    <div class="box second"></div>     
    <div class="box third"></div>     
</body>     
</html>

相關文章