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

Question

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

#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>$54,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; 添加到容器中，这样子元素就不会溢出。