css3如何实现边框阴影

html-css014

css3如何实现边框阴影,第1张

我们在制作网页的时候可以用CSS3添加边框,那么如果要给边框添加阴影该怎么做呢?下面我给大家分享一下。

工具/材料

SublimeText

首先打开Sublime Text软件,新建一个HTML文档,如下图所示

然后在html文档的Body区域插入一个div,如下图所示

接下来给div定义一些样式,注意其中的box-shadow就是定义边框阴影的,如下图所示

最后我们运行界面程序,你会看到边框已经被添加上阴影了,如下图所示

直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。

前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;

第三个值(10px)是设置模糊距离;

black就是阴影的颜色啦;

最后一个inset是在元素内部创建一个阴影,也就是内阴影了;

删除掉inset就是设置外阴影了

CSS Animatie

CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。

CSS3 Keyframes Animation Generator

Long Shadows Generate

Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

Long Shadows Generator

Fontastic

Fontastic是一个在线生成字体图标的app,可以定制属于自己的图标字体。

Create your Icon Font in seconds

Screensiz.es

Screensiz.es站收集整理了移动端的相关尺寸。

Screen Sizes

Live Tools

Live Tools是一个UI制作工具,他提供了按钮、表单、icon图标和Ribbons的制作工具,

可以在线配置相关参数,生成你需要的效果代码。

Ui Parade - Live Tools

Button Generator

生成和图片效果一样的按钮工具。

CSS Button Generator

@FONT-FACE GENERATOR

@FONT-FACE GENERATOR只需其中一种字体,就可以帮我们转换成@font-face各浏览器

下所需的所有字体格式。只是中文字体太大,不太好用。

Create Your Own @font-face Kits

@font-face ICON图标

ICON使用@font-face制作是越来越普遍了,但有一些icon字体库有几个icon,而往往我

们有时候只需要其中的几个,加载所有的icon感觉浪费,其实没有必要这么做的,在线

有两个网站,上面提供了各种字体icon库,我们只需要选择其中的部分,进行安装就OK了。

Fontello - icon fonts generator

IcoMoon App - Icon Font &SVG Generator

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator真心的好用,是我常用的一个在线制作渐变的工具,

他除了类似于photoshop的渐变工具之外,还是firefox和chrome浏览器的一个插件。而

且还能生成兼容IE的滤镜代码,好强大的。

Ultimate CSS Gradient Generator

Pageblox

Pageblox是一款在线生成布局的工具,提供了七种常见的布局模式,而且还可以根据自

己的需求做一些自定义的设置。

CSS Layout Generator

CSS Load

CSS Load是一款纯代码制作loading的工具。

CSS Load.net

【ecd】css3 Animation tool

腾讯ECD推出一款强有力的CSS3动画制作工具。

动画工具[Tool]

Character-Code

http://Character-Code.com提供了对应的字符编码,可以查询出对应的字符编码。