css如何实现单边阴影效果-css知识-PHP中文网

首页

每日编程

css知识

css如何实现单边阴影效果

藏色散人

Nov 12, 2018 pm 05:28 PM

css

本篇文章主要给大家介绍HTML/css单边阴影的具体实现方法。

对于HTML/css的初学者来说，边框阴影效果，想必大家都有一定的了解。适当的使用单边阴影效果可以让我们的网页内容更显丰富也更美观。那么在之前的文章中，也有给大家介绍过css3边框阴影效果的实现方法。

推荐参考学习：《CSS教程》

本节内容我们再详细的给大家介绍html/css单边框阴影效果的实现！

html/css实现单边框阴影的代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
 .box-shadow {
        width: 200px;
 height: 100px;
 border-radius: 5px;
 border: 1px solid #ccc;
 margin: 20px;
 }

    .top {
        box-shadow: 0 -2px 0 red;
 }

    .right {
        box-shadow: 2px 0 0 green;
 }

    .bottom {
        box-shadow: 0 2px 0 blue;
 }

    .left {
        box-shadow: -2px 0 0 orange;
 }
</style>
<body>
<div  class="box-shadow top"></div>
<div  class="box-shadow right"></div>
<div  class="box-shadow bottom"></div>
<div  class="box-shadow left"></div>

</body>
</html>

前台访问效果如下：

1.上边框阴影：