Question

Q1。我想为我的徽标添加白色边框（最右边）。我已尝试过所有内容，包括添加filter: drop-shadow(10px 10px 5px -5px white)，但不知何故，图片中没有添加任何内容。

徽标的HTML和CSS代码（在最左侧）和glyphicon（最右侧）如下 -

徽标HTML：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
          <img src="images/logo.png" alt="logo" />
      </a>

Logo CSS

.navbar-brand img {

     width:60x;
     height:60px;
     position:relative;
     bottom:20px;
     object-fit:contain;
    -webkit-filter: drop-shadow(10px 10px 5px -5px white);
    filter:  drop-shadow(10px 10px 5px -5px white); 

}

Q2。我想将极右侧的glyphicon对齐到顶部。我试过`

display:relative;`top:4px;`

但它没有做到这一点。有什么想法吗？

HTML glyphicon：

<li><a href="#"><span class="glyphicon glyphicon-log-in"> </span>  </a></li>

提前感谢所有帮助人员！

Answer 1

Q1：

可以在样式中添加border radius：

 border: 1px solid white;
 border-radius: 25px;

但是，根据this帖子的最高评分回答，所有图片都以宽X高度格式保存，因此无法像您想要的那样添加边框。您需要使用photoshop或其他程序手动将边框添加到.png图像。

Q2：

您想要将位置absolute添加到css中。所以代码看起来像这样：

position: absolute; top: 4px;

在导航栏上对齐glyphicons和徽标

1 个答案: