0

下图有 2 个 div，1 个是登录表单的部分，另一个是 facebook 和 twitter 上的按钮所在的部分，然后我想要放置一个边框，但具有特定的长度，即红色框在哪里。

第一个div的宽度是：850px，第二个是：比第一个高30% ！

长度边框 div

我希望我已经解释了！

HTML

<div id="top">
    <!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span><a href="#login" id="inicia">Inicia sesión</a> ó <a href="registro.php" id="registro">registrate!</b></span>-->
    <div id="loginform">
        <form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
            <input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
            <input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
            <a href="#login" id="dologin" name="dologin">Iniciar</a> ó
            <a href="registro.php" id="dosignup" name="dosignup">Registrarse</a>
            <span id="errorlogin"></span>
        </form>
    </div>
    <span id="currentUser"></span>

    <!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
    <ul id="socialmedia">
        <li><a href="http://www.twitter.com"><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></a></li>
        <li><a href="http://www.facebook.com"><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></a></li>
    </ul>
</div>

CSS

#top {
    height:50px;
    background:white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-bottom:none;
}
#topsocial{
    width:30%;
    padding: 5px;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%;
    background:white;
    overflow:hidden;
    float:right;
    position: relative;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-top: none;
}

我还有另一个问题，如何从顶部到第二个 div #topsocial 退出或删除 box-shadow？

4

3 回答 3

1

提供标记和 CSS 将有助于获得更有用的答案，但第一个建议是创建一个新的 <div>，它将包含登录表单和 850 像素环绕 <div> 内的圆角边框。然后在内部 <div> 上设置宽度，即 facebook 和 twitter 块的左侧，但稍微重叠边框。然后将 30% <div> 扩展到顶部。

更新：http: //jsfiddle.net/zFa9n/

于 2012-07-03T19:45:51.097 回答
1

您可以将第一个设置为<div>带边框的框的大小，第二个<div>可以放置在绝对位置并覆盖边框。

我制作了一个jsFiddle来向您展示如何做到这一点。我们没有您的 HTML，所以无论如何我希望它有所帮助。

于 2012-07-03T19:47:24.387 回答
0

我只对您的CSS代码进行了一些更改，该代码适用于任何屏幕宽度，并为您提供所需的结果，希望您喜欢。

#top {
    height:50px;
    background:white;
    border: 5px solid black;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
}

#topsocial{
    position: relative;
    top:-5px;
    width:30%;
    float:right;
    padding: 5px;
    border: 5px solid black;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    background:white;
    overflow:hidden;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
}
于 2012-12-14T02:49:20.223 回答