用CSS画一个针线包效果的边框
2016-08-05 21:48 yojiaku 阅读(597) 评论(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;
效果分别为:(加上了前面例子中的一些代码)
——>
【1】
——> blur-radius (模糊半径) 这张图能更好解释 blur :
——>这张图更能体现出 blur 的效果:
我们能够很明显看出增加了 blur-radius 模糊半径后,原本的实体阴影其实往外扩展了,尤其是最右边的图将模糊半径加大后,边框的4条边都有了阴影效果。
(有三个方框图的代码分别为:[1] box-shadow: 5px 10px 10px red;[2] box-shadow: 5px 10px 20px red;[3] box-shadow: 5px 10px 50px red;
引用资料:http://www.jianshu.com/p/1303b96661b9)
【2】
spread-radius:阴影扩展半径。该参数可选,正值表示阴影扩展,负值表示阴影缩小。(在【2】中第二张图有spread)
【3】
可以看出这里使用的 inset 属性,即内阴影
[4]
哈哈,终于到多个阴影的设置了,用逗号隔开就可以了哟!
【5】
ps:第一次发现 teal 这个颜色真漂亮,加上模糊阴影,好多颜色都变得好漂亮!(蓝色和青色搭配起来真是敲好看)大意的去尝试吧!