CSS3 box-shadow 属性使用案例

最新推荐文章于 2022-03-30 20:02:40 发布

土垚金鑫

最新推荐文章于 2022-03-30 20:02:40 发布

阅读量348

点赞数

分类专栏： css3 box-shadow的用法案例文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_44994731/article/details/103897576

版权

css3 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

box-shadow的用法案例

1 篇文章 0 订阅

订阅专栏

对css3 中的box-shadow的使用案例如下几个案例！
截图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boxShadow应用</title>
    <style>
        .box1,.box2,.box3,.box4{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: auto;
        }
        .box1{
            box-shadow: 1px 0px 1px 5px #5e5e5e;
        }
        .box2{
            box-shadow: 10px 10px 10px 5px #5e5e5e;
        }
        .box3{
            box-shadow: 0px 0px 1px 5px #5e5e5e inset;
        }
        .box4{
            box-shadow: 10px 10px 5px 5px #5e5e5e;
        }
    </style>
</head>
<body>

<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
</body>
</html>

浏览器支持
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法
box-shadow 属性向框添加一个或多个阴影。


默认值	none
继承性	no
版本	css3
JavaScript 语法	object.style.boxShadow=“10px 10px 5px #888888”

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

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

土垚金鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 box-shadow 属性使用案例

对css3 中的box-shadow的使用案例如下几个案例！截图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>boxShadow应用</title> <style> ...
复制链接

扫一扫