css样式阴影,css实现阴影效果

CSS 阴影怎么写？

浏览器兼容性差，滤镜一般很少去用的，不过半透明等除外，那些可以通过兼容的css来控制

金牛ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

颜色（color）：rgb(0，0，0)

不透明度（opacity）：10%

角度（Angle）:投影的角度

距离（Distance）:阴影的距离。根据角度和距离可以换算出CSS3阴影中的x-offset和y-offet。 x-offset = Distance * cos(180 -Angle) ， y-offset = Distance * sin(180 - Angle)

扩展（Spread）: 阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。 Spread * Size = 阴影中实体颜色的大小。剩下的就是虚化的颜色。CSS3阴影 spread-radius = Spread * Size

大小（Size）: 阴影的大小。在CSS3中 blur-radius + spread-radius = Size 即 blur-radius = Size - spread-radius

x-offset: 87 * cos(180°-(- 90°)) = 0px（87=Distance(ps上的距离)，-90°=Angle（ps上的角度））

y-offset: 87 * sin(180°- (- 90°)) =-87px（同理，注意是sin，不是cos）

spread-radius: 0*73=0px（0=Spread（ps上的扩展），73=Size(ps上的大小)）

blur-radius: 73-0=73px（73=Size(ps上的大小)，0=spread-radius（上一行的数据））

color+opacity：rgba(0,0,0,.1) (.1就是10%，就是不透明度)

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

工具/材料

Sublime Text

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

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

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

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

1、首先新建一个html文件，命名为test.html，使用div标签创建一个模块，用于测试。如下图所示。

2、在test.html文件内，给div添加一个class属性，属性值设置为myway。

3、然后在css标签内，通过class设置div的样式，定义它的宽度为200px，高度为200px，背景颜色为黑色。

4、接着在css标签内，再使用box-shadow属性设置div的阴影效果，其中，左边阴影为绿色，顶部阴影为蓝色，底部阴影为红色，右边阴影为黄色。

5、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。

网页名称：css样式阴影,css实现阴影效果
本文URL：http://myzitong.com/article/dscijph.html