Question

我无法弄清楚为什么没有出现边框。我有一个封装所有元素的主包装器;我只是将每个元素的背景设置为透明白色，然后在包装器中添加透明的白色边框。

/* Wrapper - Main *********/    
.main_wrapper{ 
        display:block;
        background: rgba(255,0,0,.5);
        width:1000px;
        height: 2000px;
        margin-left:18%;
        margin-top:7%;
        border:10px;
        border-color: rgba(255,255,255,.5);
}

HTML

<div class="main_wrapper">

<!-- Logo _____________________________________________________-->

<div class="logo">
    <a href="index.html"><img alt="emma carmichael" height="150px"
            src="images/Home/emma-logo.png"></a>
</div>

<!---Navigation Menu ______________________________________________-->

    <div id="main_menu" class="wrapper_nav_box">
        <div class="nav_box">
            <a href="writing.html">WRITING</a> 
        </div>
        <div class="nav_box">
            <a href="http://tumblr.com">BLOG</a>
        </div>
        <div class="nav_box">
            <a href="contact.html">CONTACT</a>
        </div>
    </div>

有什么想法吗？

Answer 1

作为@Lotus said：

您忘记包含边框样式

作为使用Lotus建议的速记的替代品，你可以这样做：

.main_wrapper
{ 
    /*other stuff*/
    border-width: 10px;
    border-style: solid;
    border-color: rgba(255,255,255,.5);
}

注意：我添加这个以扩展Lotus的答案，并帮助回答@Claire的comment“我知道我应该使用速记，但为什么不会'另一种方式是工作吗？“

边界不见了

HTML

1 个答案: