如何正确实现圆角？为什么我使用的方式不起作用？

Question

我正在尝试在此容器的边界上施加一个 20px 的圆角半径。我需要在不导入包或类似的东西的情况下执行此操作。这是相关代码。

#container {
    background-color: #EEEEEE;
    border-radius: 20px;
    box-shadow: 5px 5px 5px gray;
    margin: 0px auto 65px auto;
    width: 800px;
}

据我了解，

border-radius: 20px

应该可以完成我想要的。无论出于何种原因，它都不起作用。

这是期望的输出。 Picture

这就是实际发生的事情。 Picture

你能帮我找出错误吗？

#banner {
 height: 50px;
 background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
 background-repeat: repeat-x;
}

#banner img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

body {
 background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
 margin: 0px;
 padding: 0px;
}

#column-left, #column-right {
 margin-right: 2%;
 width: 47%;
}

#column-left {
 float: left;
 margin-left: 2%;
}

#column-right {
 float: right;
}

#container {
 background-color: #EEEEEE;
 border-radius: 20px;
 box-shadow: 5px 5px 5px gray;
 margin: auto;
 width: 800px;
}

#date {
 background-color: #A2B964;
 clear: both;
 margin-bottom: 0;
 padding: 5px;
 text-align: center;
}

h1, .reviewer-text {
 font-family: Georgia, "Times New Roman", serif;
}

h1 {
 font-size: 24pt;
 font-weight: bold;
 text-align: center;
 text-shadow: 3px 3px #999999;
}

#logo {
 background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
 background-repeat: repeat-x;
 height: 83px;
 font-size: 48pt;
 font-weight: bold;
 color: red;
}

#logo img {
 vertical-align: bottom;
}

.publication {
 font-style: italic;
}

#reviews {
 width: 550px;
}

.reviewer-info {
 padding-bottom: 20px;
}

.reviewer-info img, .reviewer-text img {
 float: left;
 margin-right: 5px;
}

.reviewer-text {
 background-color: #FFFFFF;
 border: 2px solid #CCCCCC;
 border-radius: 20px;
 padding-top: 8px;
 padding-bottom: 8px;
 padding-left: 8px;
 padding-right: 8px;
}

#general-overview {
 width: 250px;
 background-color: #A2B964;
 font-family: Arial, Helvetica, sans-serif;
 float: right;
}

#general-overview dt {
 font-weight: bold;
 margin-top: 10pt;
 padding-left: 10pt;
}

#general-overview dd {
 padding-left: 10pt;
 padding-right: 10pt;
}

#general-overview ul {
 list-style: none;
 margin: 0px;
 padding: 0px;
}

#validators {
 bottom: 0px;
 right: 0px;
 position: fixed;
 opacity: 0.5;
}

<div id = "banner">
 <img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
</div>

<h1>TMNT (2007)</h1>

<div id="container">
 <div id="general-overview">
  <div>
   <img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
  </div>

  <dl>
   <dt>STARRING</dt>
   <dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>

   <dt>DIRECTOR</dt>
   <dd>Kevin Munroe</dd>

   <dt>RATING</dt>
   <dd>PG</dd>

   <dt>THEATRICAL RELEASE</dt>
   <dd>Mar 23, 2007</dd>

   <dt>MOVIE SYNOPSIS</dt>
   <dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>

   <dt>MPAA RATING</dt>
   <dd>PG, for animated action violence, some scary cartoon images and mild language</dd>

   <dt>RELEASE COMPANY</dt>
   <dd>Warner Bros.</dd>

   <dt>RUNTIME</dt>
   <dd>90 mins</dd>

   <dt>GENRE</dt>
   <dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>

   <dt>BOX OFFICE</dt>
   <dd>,132,596</dd>

   <dt>LINKS</dt>
   <dd>
    <br />
    <ul>
     <li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
     <li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
     <li><a href="http://www.rottentomatoes.com/">RT Home</a></li>

    </ul>
   </dd>
  </dl>
 </div>

 <div id="reviews"> 
  <div id="logo">
   <img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
   33%
  </div>

  <div id="column-left">
   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the     then-cutting-edge puppetry of the 1990 live-action movie.</q>    
  </p>    
  <p class="reviewer-info">
       <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
       Peter Debruge <br />
       <span class="publication">Variety</span>
  </p>    

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Todd Gilchrist <br />
    <span class="publication">IGN Movies</span>
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>It stinks!</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Jay Sherman (unemployed)
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Joshua Tyler <br />
    <span class="publication">CinemaBlend.com</span>
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>This movie sucks because reasons.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    T. Tally Nobias <br />
    <span class="publication">objectivereviews.com</span>
   </p>
  </div>

  <div id="column-right">
   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators     once sought to spoof.</q>
  </p>    
  <p class="reviewer-info">
       <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
       Jeannette Catsoulis <br />
       <span class="publication">New York Times</span>
  </p>    

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Ed Gonzalez <br />
    <span class="publication">Slant Magazine</span>
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
    <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Mark Palermo <br />
    <span class="publication">Coast (Halifax, Nova Scotia)</span>
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    Steve Rhodes <br />
    <span class="publication">Internet Reviews</span>
   </p>

   <p class="reviewer-text">
    <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
    <q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
   </p>
   <p class="reviewer-info">
    <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
    A. Rheal Kritik <br />
    <span class="publication">Facade Inc.</span>
   </p>
  </div>
 </div>
 <p id="date">(1-10) of 88</p>
</div>

<div id="validators">
 <a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML5" /></a><br />
 <a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
</div>

Answer 1

从外观上看，#container 中还有另一个元素。您需要将 overflow: hidden; 添加到容器中，这样子元素就不会溢出。

如何正确实现圆角？为什么我使用的方式不起作用？

How do I correctly implement rounded corners? Why is the way I'm using not working?

html

css

format

border

margin