时间戳

首页 > 解决方案 > 如何移动这个盒子阴影？

html - 如何移动这个盒子阴影？

问题描述

在编码方面，我是一个完整的初学者，所以我在互联网上找到了这个盒子阴影，但不知道如何移动它，所以它适合我正在使用的字体。继承人的CSS标题：

.sidebar-title {
   position:absolute;
   z-index:150;
   top:100px;
   left:330px;
   width:200px;
   height:30px;
   text-align:center;
   color:#000;
   background-color:#fff;
   text-transform:lowercase;
   font-size:20px;
   padding:10px;
   line-height:33px;
   box-sizing:border-box;
   font-weight:normal;
   font-family:'dalmatins';
}

这是我想以某种方式向上移动的阴影部分

.sidebar-title span {
   box-shadow:#aaa 0px -15px 0px inset;
   padding:0px 2px;
}

我已经尝试添加边距、填充和调整它，但我所做的一切都行不通。它向两侧移动，但从不向上移动。有人知道这里可能出现什么问题吗？任何帮助表示赞赏。

编辑：html！ 

<div class="sidebar-title">
    <a href="/"><span>your love is sunlight</span></a>
</div>

edit2：添加片段 :: Rickard 

.sidebar-title {
   position:absolute;
   z-index:150;
   top:100px;
   left:330px;
   width:200px;
   height:30px;
   text-align:center;
   color:#000;
   background-color:#fff;
   text-transform:lowercase;
   font-size:20px;
   padding:10px;
   line-height:33px;
   box-sizing:border-box;
   font-weight:normal;
   font-family:'dalmatins';
}

.sidebar-title span {
   box-shadow:#aaa 0px -15px 0px inset;
   padding:0px 2px;
}
<div class="sidebar-title">
  <a href="/"><span>your love is sunlight</span></a>
</div>

编辑3：添加一些图片以供清除。 之前&我希望它如何使用更改后的字体。

更改font-size, font-family&后line-height。

添加后display:inline-block

编辑4：box-shadow用这个替换后

.sidebar-title span {
  background: linear-gradient( #b99e94, #b99e94) 
  center/
  100% 15%  /* adjust this to control the size*/
  no-repeat;
    }

它几乎是完美的，只是线条更多地位于顶部而不是底部。 我怎样才能让它像第一个屏幕截图一样位于底部？

标签： htmlcssbox-shadow

解决方案

给它适当的box-shadow只是让它成为一个block.

这里我只添加display:inline-block到跨度。然后您可以在box-shadow值中使用框位置。（目前是左边 0 和底部 -15px，如果你想让它面朝上，你可能想要从底部正向移动）

.sidebar-title {
   position:absolute;
   z-index:150;
   top:100px;
   left:330px;
   width:200px;
   height:30px;
   text-align:center;
   color:#000;
   background-color:#fff;
   text-transform:lowercase;
   font-size:20px;
   padding:10px;
   line-height:33px;
   box-sizing:border-box;
   font-weight:normal;
   font-family:'dalmatins';
}

.sidebar-title span {
   display: inline-block;
   box-shadow:#aaa 0px -15px 0px inset;
   padding:0px 2px;
}
<div class="sidebar-title">
  <a href="/"><span>your love is sunlight</span></a>
</div>

推荐阅读