边框阴影

最新推荐文章于 2024-01-09 09:39:01 发布

dq_095

最新推荐文章于 2024-01-09 09:39:01 发布

阅读量428

点赞数

分类专栏： CSS HTML 文章标签：边框阴影

本文链接：https://blog.csdn.net/qq_37968920/article/details/82392442

版权

HTML 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

CSS

14 篇文章 1 订阅

订阅专栏

边框阴影

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop-shadows</title>    
    <style>
        body {
            padding: 20px 0 0;
            font: 14px/1.5 Arial, sans-serif;
            text-align: center;
            color: #333;
            background: #ccc;
        }

        .drop-shadow {
            position: relative;
            width: 45%;    
            padding: 1em; 
            margin: 2em auto 5em; 
            background: #fff;
            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; 
            z-index: -2;
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
        }

        .drop-shadow:after {                 
            right: 10px; 
            left: auto;
        }

        .round {
            border-radius: 4px;
        }

        .round:before,
        .round:after { 
            max-width: 300px;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            transform: rotate(-3deg);
        }

        .round:after {
            transform: rotate(3deg);
        }

        .curls {
            border: 1px solid #efefef;   
            border-radius: 0 0 120px 120px / 0 0 6px 6px;
        }

        .curls:before,
        .curls:after { 
            bottom: 12px;
            max-width: 200px;
            height: 55%;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            transform: skew(-8deg) rotate(-4deg);
        } 

        .curls:after {
            transform: skew(8deg) rotate(4deg);
        }

        .perspective:before {
            left: 28px;
            bottom: 8px;
            max-width: 200px;
            height: 35%;
            box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
            transform: skew(50deg);
        }

        .perspective:after {
            display: none;
        }

        .raised:before {
            width: auto;
            right: 10px;
            left: 10px;
            bottom: 0;
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
        }

        .rotated {
            transform: rotate(-3deg);
        }

        .rotated *:first-child:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

    </style>
</head>
<body>

    <div class="drop-shadow round">
        <h1>CSS drop-shadows without images</h1>
        <p>No extra markup, fluid, all modern browsers</p>
    </div>

    <div class="drop-shadow curls">
        <h1>Some curls</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow perspective">
        <h1>Some perspective</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow raised">
        <h1>Raised box</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow round rotated">
        <h1>Rotated box</h1>
        <p>No extra markup, all modern browsers. Needs a child element to work.</p>
    </div>
</body>
</html>

dq_095

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
边框阴影

边框阴影 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;drop-shadows&lt;/title&gt; &lt;style&gt; body
复制链接

扫一扫

专栏目录