css – 将阴影应用于边框顶部?

前端之家收集整理的这篇文章主要介绍了css – 将阴影应用于边框顶部?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何将阴影应用于特定的边框?

例如,我有以下代码

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}

我想要一个阴影(1px 1px 1px #cdcdcd)仅应用于边框顶部。

实现这一目标的最佳方式是什么?

编辑

这本质上是我正在寻找的

div {
    border-top: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    padding-top:25px;
    -webkit-Box-shadow: 0px 1px 1px rgba(50,50,0.75);
    -moz-Box-shadow:    0px 1px 1px rgba(50,0.75);
    Box-shadow:         0px 1px 1px rgba(50,0.75);
}

然而,阴影似乎受到填充的影响。有没有把阴影贴在边框上,而不是调整填充物?

解决方法

这样的东西
div {
    border: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    height: 158px;
    padding-top:25px;
    -webkit-Box-shadow: 0px -4px 3px rgba(50,0.75);
    -moz-Box-shadow:    0px -4px 3px rgba(50,0.75);
    Box-shadow:         0px -4px 3px rgba(50,0.75);
}

http://jsfiddle.net/FrEnY/

原文链接:https://www.f2er.com/css/218099.html

猜你在找的CSS相关文章