CSS3简明教程-2.3.CSS3边框之盒元素阴影box-shadow

最新推荐文章于 2022-02-23 23:09:32 发布

lufaxinT

最新推荐文章于 2022-02-23 23:09:32 发布

阅读量1.3k

点赞数

分类专栏： CSS3 文章标签： css3 css web前端

本文链接：https://blog.csdn.net/tomorrow13210073213/article/details/41943283

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS3对元素边框的另一改进是边框阴影。利用阴影可以很简单的实现很炫的阴影按钮等效果，而不使用背景图片。

属性名称：box-shadow

属性值：一系列值得组合

box-shadow语法如下：

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

w3cschool对其解释如下：

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

废话不多说，下面的例子用box-shadow和border-radius属性制作了一个简单的圆形阴影按钮：

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: #ccc;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            box-shadow: -4px 0 5px #198dca, 0 -4px 5px #198dca, 0 4px 5px #198dca, 4px 0 5px #198dca;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下图：