0

是否可以围绕这两个形状绘制最终边框，而左右两侧没有圆圈的边框？

这是我到目前为止所拥有的

<div class="site-header1">
  <div class="logo">
    <div class="text">
      <span>Class</span>
      <span>Class</span>
    </div>
    <div class="img"></div>
 </div>
</div>

css

.site-header1 .logo{
    position:relative;
    height: 80px;
}

.site-header1 .logo .text{
    padding: 10px;
    font-weight: lighter;
    font-family: 'Lato', sans-serif;
    font-size:1.5em;
    border-radius: 25px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    top: 17px;
}
.site-header1 .logo .text span+span{
    padding-left:75px;
}
.site-header1 .logo .img{
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

我有一个小提琴从这里开始http://jsfiddle.net/TH5E5/

4

1 回答 1

0

虽然我相信您可以使用背景渐变来获得效果（类似于为此答案所做的事情），但更简单的方法是...

为边框使用伪元素

这个小提琴似乎是你想要的，在 Chrome、Firefox 和 IE9 中对我来说看起来不错。它将边框放在伪元素上，将带边框的圆推到主形状后面，然后使用.img自身覆盖该形状的边框。这是您的 css 代码的更改部分（您的 html 与您拥有的相同，大部分原始 css 也是如此）：

更改/添加 CSS

.site-header1 .logo .img { /*this is the image itself */
    border-radius: 99px; /* 1px less than the border */
    background:white;
    border:0;
    position:absolute;
    left: 76px; /* 1px more than border below */
    top: 8px; /* 1px more than border below */
    height: 70px;
    width: 70px;
}
.site-header1 .logo:after { /*this is the image border */
    content: '';
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index: -1; /* push it behind */
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

让文本与图像重叠

更改一些属性：

.site-header1 .logo .text {
    /* position: absolute; needs to be removed */
    display: inline-block;
    margin-top: 17px; /* this replaces the top: 17px when it was absolute */
}

然后添加以下内容以将文本推送到 img 上方：

.site-header1 .logo .text span {
    position: relative;
    z-index: 1;
}

在这个小提琴中查看结果。

于 2013-01-28T02:13:39.373 回答