0

左右に円の境界線を持たずに、これら 2 つの形状の周りに最終的な境界線を描くことは可能ですか?

これが私がこれまでに持っているものです

<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 に答える