用CSS画一个针线包效果的边框

2016-08-05 21:48 yojiaku 阅读(604) 评论(0) 编辑收藏举报

今天，发现用CSS可以做出很漂亮的针线包样式的边框（有点类似border的dashed样式），

先放效果图：

很漂亮吧，其实，主要CSS就是给 border-style:dashed 加上 box-shadow ，再用 border-radius 修饰一下，选个漂亮的颜色就能设计出较好的边框啦！

放上代码：stitched.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML CSS Exercise Create a CSS based Grid layout</title>
 <style>  
    .stitched {  
   width: 200px;  
   padding: 20px;  
   margin: 10px;  
   background: #0d90df;   
   border: 2px dashed #fff;  
   border-radius: 10px;  
   box-shadow: 0 0 0 4px #0d90df, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);  
}  
    </style>  
   
  </head>
 <body>
   <div class="stitched"></div>
 </body>
</html>

让我介绍一下 box-shadow 的用法：

box-shadow:以逗号分隔列表来描述一个或多个阴影效果，如上述代码就有两个阴影效果：0 0 0 4px #0d90df 和 2px 1px 6px 4px rgba(10, 10, 0, 0.5) ；并且这个属性可以用于几乎任何标签。

box-shadow语法：

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px teal;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px teal;

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em teal;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px orange, -1em 0 0.4em teal;