时间戳

首页 > 解决方案 > 边框半径仅适用于 div 的一侧

html - 边框半径仅适用于 div 的一侧

问题描述

当我遇到问题时，我目前正在为一家小型企业开发一个网站，当我尝试将边框半径应用于 div 时，它仅将其应用于左侧，我已经搜索了谷歌和堆栈溢出以寻找类似的答案但是还没有找到任何东西。

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    background-color: #e0e0e0;
    }
    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>

如果有人有答案，将不胜感激

标签： htmlcss

解决方案

背景颜色与标题 div 重叠。

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    /*background-color: #e0e0e0;*/
    }
    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>

推荐阅读