css3的box-shadow程式碼例項

admin發表於2017-02-21
CSSS3

關於box-shadow屬性的基本用法可以參閱CSS3 box-shadow一章節。

下面分享一個比較另類的box-shadow程式碼例項，感興趣的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
div {
  width: 30px;
  height: 30px;
  margin: 30px 50px;
  box-shadow: 180px 0 0 red, 
              210px 0 0 red, 
              240px 0 0 red, 
              270px 0 0 red, 
              300px 0 0 red, 
              150px 30px 0 red, 
              180px 30px 0 red, 
              210px 30px 0 red, 
              240px 30px 0 red, 
              270px 30px 0 red, 
              300px 30px 0 red, 
              330px 30px 0 red, 
              360px 30px 0 red, 
              390px 30px 0 red, 
              150px 60px 0 saddlebrown, 
              180px 60px 0 saddlebrown, 
              210px 60px 0 saddlebrown, 
              240px 60px 0 lightsalmon, 
              270px 60px 0 lightsalmon, 
              300px 60px 0 black, 
              330px 60px 0 lightsalmon, 
              120px 90px 0 saddlebrown, 
              150px 90px 0 lightsalmon, 
              180px 90px 0 saddlebrown, 
              210px 90px 0 lightsalmon, 
              240px 90px 0 lightsalmon, 
              270px 90px 0 lightsalmon, 
              300px 90px 0 black, 
              330px 90px 0 lightsalmon, 
              360px 90px 0 lightsalmon, 
              390px 90px 0 lightsalmon, 
              120px 120px 0 saddlebrown, 
              150px 120px 0 lightsalmon, 
              180px 120px 0 saddlebrown, 
              210px 120px 0 saddlebrown, 
              240px 120px 0 lightsalmon, 
              270px 120px 0 lightsalmon, 
              300px 120px 0 lightsalmon, 
              330px 120px 0 black, 
              360px 120px 0 lightsalmon, 
              390px 120px 0 lightsalmon, 
              420px 120px 0 lightsalmon, 
              120px 150px 0 saddlebrown, 
              150px 150px 0 saddlebrown, 
              180px 150px 0 lightsalmon, 
              210px 150px 0 lightsalmon, 
              240px 150px 0 lightsalmon, 
              270px 150px 0 lightsalmon, 
              300px 150px 0 black, 
              330px 150px 0 black, 
              360px 150px 0 black, 
              390px 150px 0 black, 
              180px 180px 0 lightsalmon, 
              210px 180px 0 lightsalmon, 
              240px 180px 0 lightsalmon, 
              270px 180px 0 lightsalmon, 
              300px 180px 0 lightsalmon, 
              330px 180px 0 lightsalmon, 
              360px 180px 0 lightsalmon, 
              150px 210px 0 blue, 
              180px 210px 0 blue, 
              210px 210px 0 red, 
              240px 210px 0 blue, 
              270px 210px 0 blue, 
              300px 210px 0 red, 
              120px 240px 0 blue, 
              120px 240px 0 blue, 
              120px 240px 0 blue, 
              150px 240px 0 blue, 
              180px 240px 0 blue, 
              210px 240px 0 red, 
              240px 240px 0 blue, 
              270px 240px 0 blue, 
              300px 240px 0 red, 
              330px 240px 0 blue, 
              360px 240px 0 blue, 
              390px 240px 0 blue,
              90px 270px 0 blue, 
              120px 270px 0 blue, 
              150px 270px 0 blue, 
              180px 270px 0 blue, 
              210px 270px 0 red, 
              240px 270px 0 red, 
              270px 270px 0 red, 
              300px 270px 0 red, 
              330px 270px 0 blue, 
              360px 270px 0 blue, 
              390px 270px 0 blue, 
              420px 270px 0 blue, 
              90px 300px 0 lightsalmon, 
              120px 300px 0 lightsalmon, 
              150px 300px 0 blue, 
              180px 300px 0 red, 
              210px 300px 0 yellow, 
              240px 300px 0 red, 
              270px 300px 0 red, 
              300px 300px 0 yellow, 
              330px 300px 0 red, 
              360px 300px 0 blue, 
              390px 300px 0 lightsalmon, 
              420px 300px 0 lightsalmon, 
              90px 330px 0 lightsalmon, 
              120px 330px 0 lightsalmon, 
              150px 330px 0 lightsalmon, 
              180px 330px 0 red, 
              210px 330px 0 red, 
              240px 330px 0 red, 
              270px 330px 0 red, 
              300px 330px 0 red, 
              330px 330px 0 red, 
              360px 330px 0 lightsalmon, 
              390px 330px 0 lightsalmon, 
              420px 330px 0 lightsalmon, 
              90px 360px 0 lightsalmon, 
              120px 360px 0 lightsalmon, 
              150px 360px 0 red, 
              180px 360px 0 red, 
              210px 360px 0 red, 
              240px 360px 0 red, 
              270px 360px 0 red, 
              300px 360px 0 red, 
              330px 360px 0 red, 
              360px 360px 0 red, 
              390px 360px 0 lightsalmon, 
              420px 360px 0 lightsalmon, 
              150px 390px 0 red, 
              180px 390px 0 red, 
              210px 390px 0 red, 
              300px 390px 0 red, 
              330px 390px 0 red, 
              360px 390px 0 red, 
              120px 420px 0 saddlebrown, 
              150px 420px 0 saddlebrown, 
              180px 420px 0 saddlebrown, 
              330px 420px 0 saddlebrown, 
              360px 420px 0 saddlebrown, 
              390px 420px 0 saddlebrown, 
              90px 450px 0 saddlebrown, 
              120px 450px 0 saddlebrown, 
              150px 450px 0 saddlebrown, 
              180px 450px 0 saddlebrown, 
              330px 450px 0 saddlebrown, 
              360px 450px 0 saddlebrown, 
              390px 450px 0 saddlebrown, 
              420px 450px 0 saddlebrown;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

相關文章