XM的小窝


 

【记录】CSS3盒子阴影

有时候想要给网页上的box增加盒子阴影,这样显得更有立体感
这时我们就要用到盒子阴影属性box-shandow:

语法:

box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow 必需。水平阴影的位置,允许负值。
v-shadow 必需。垂直阴影的位置,允许负值。
blur 可选。模糊距离。
spread 可选,阴影的尺寸。
color 可选,阴影的颜色。
inset 可选,将外部阴影(outset)改为内部阴影。

p.s: inset属性不需要写出来,如写了,样式会失效。

样例:

代码:

<style>
.shadow {
    width: 300px;
    height: 300px;
    background-color: #66ccff;
    box-shadow: 6px 3px 6px 2px rgba(255, 25, 25, .3);
}
</style>
<div class="shadow"></div>

效果:

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注