利用box-shadow制作好看的阴影悬浮特效

最新推荐文章于 2023-07-13 17:27:25 发布

king-w

最新推荐文章于 2023-07-13 17:27:25 发布

阅读量6k

点赞数 1

文章标签： css3 box-shadow 悬浮阴影

本文链接：https://blog.csdn.net/qq_33401924/article/details/53896767

版权

本文介绍如何使用CSS3的box-shadow属性创建吸引人的阴影特效，通过实例展示不同类型的悬浮阴影效果，帮助提升设计感。

摘要由CSDN通过智能技术生成

很多人都知道有box-shadow，但是自己实际用的时候，会发现自己做的阴影特效都特别的丑，下面我就给大家分享一下各种好看的阴影特效。

效果图：

这里写图片描述

代码：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯CSS3实现的各种阴影效果</title>
    <style>
        body{
    padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}
        a{
    font-weight: bold;color: #346AA8;}
        a: hover, a: focus, a: active{
    text-decoration: none;}
        .container{
    position: relative;z-index: 1;width: 600px;padding: 20px;margin: 0 auto;background: #FAF0D9;}
        .container: after{
    content: "";display: block;clear: both;visibility: hidden;height: 0;font-size: 0;}
        /* Shared styles*/.drop-shadow{
    position: relative;float: left;width: 40%;padding: 1em;margin: 2em 10px 4em;background: #fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
        .drop-shadow: before, .drop-shadow: after{
    content: "";position: absolute;