css实现带空的便签纸效果-html代码-BFW代码库

css实现带空的便签纸效果

代码语言：html

代码描述：css实现带空的便签纸效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            font-family: Roboto,sans-serif;
        }

        h1 {
            margin: 40px 0 20px;
        }

        .pinned-note {
            position: relative;
            background: #f8f1c6;
            background: linear-gradient(#f8f1c6 50%, #f8f1c6 98%, #989898 100%);
            background-size: 1px 34px;
            border-radius: 5px;
            border: 1px solid #C4C296;
            color: #43423d;
            text-shadow: 0 1px 1px #ffffff;
            max-width: 480px;
            margin: 20px auto;
        }
        .pinned-note .nodes {
            background: radial-gradient(#ffffff 30%, transparent 1%) 0 0, radial-gradient(rgba(0,0,0,1) 1%, transparent 35%) 0 0px;
            background-size: 30px 30px;
            background-repeat: repeat-y;
            margin-left: 8px;
        }
        .pinned-note .no-nodes {
            background: none;
            margin-left: -20px;
        }
        .pinned-note .left-strip {
            border-left: 3px double #989898;
            margin-left: 40px;
            padding: 10px 20px 12px 20px;
            outline: none;
        }
        .pinned-heading {
            font-size: 20px;
            line-height: 32px;
            margin: 25px 0 10px;
        }
        .pinned-description {
            font-size: 16px;
            line-height: 34px;
            margin: 10px 0;
            position: relative;
            top: -2px;
        }
        .anchor-link {
            font-weight: bold;
            text.........完整代码请登录后点击上方下载按钮下载查看