Question

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

第一个div的宽度是： 850px ，第二个是： 30％超过第一个！

length border 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？

Answer 1

提供标记和CSS将有助于获得更有用的答案，但第一个建议是创建一个新的＆lt; div＆gt;它将包含850px包装＆lt; div＆gt;内的登录表单和圆形边框。然后在内部设置宽度＆lt; div＆gt;这是在facebook和twitter块的左侧，但略微重叠边框。然后延长30％＆lt; div＆gt;到顶部。

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

Answer 2

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

我已经制作了jsFiddle来告诉你如何做到这一点。我们没有您的HTML，所以我希望它无论如何都有帮助。

Answer 3

我只对您的 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);
}

CSS：如何限制border-bottom div的长度？

3 个答案: