如何创建 css 渐变和阴影

Question

我正在尝试创建类似于下图的边框底部渐变。只是想知道是否可以使用 css 来实现？

Answer 1

    .myshadow
    {
        position:relative;
        width: 100px;
      height: 80px;
        -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px 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;
    }
    .myshadow:before, .myshadow:after
    {
        content:"";
        position:absolute;
        z-index:-1;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
        box-shadow:0 0 20px rgba(0,0,0,0.8);
        top:0;
        bottom:0;
        left:10px;
        right:10px;
        -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
    }
    .myshadow:after
    {
        right:10px;
        left:auto;
        -webkit-transform:skew(8deg) rotate(3deg);
           -moz-transform:skew(8deg) rotate(3deg);
            -ms-transform:skew(8deg) rotate(3deg);
             -o-transform:skew(8deg) rotate(3deg);
                transform:skew(8deg) rotate(3deg);
    }

<div class="myshadow"></div>

如何创建 css 渐变和阴影

how to create css gradients and shadow

html

css

svg

gradient