如何创建css渐变和阴影答案

【问题标题】：how to create css gradients and shadow如何创建css渐变和阴影
【发布时间】：2015-09-04 02:07:02
【问题描述】：

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

【问题讨论】：

看起来你可以使用盒子阴影来创建它。这可能会有所帮助。 css-tricks.com/almanac/properties/b/box-shadow

【解决方案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);
    }

&lt;div class="myshadow"&gt;&lt;/div&gt;

【讨论】：

我为您的代码创建了一个 sn-p。做起来很容易，让其他人很容易看到结果