我希望带有“游戏”类的 div 包围/环绕我的段落，这样每个词在到达圆 Angular 时都会中断，并且没有什么是不可见的。
我该怎么做？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="metacore.css"/>
<link rel="stylesheet" href="../font-awesome-4.6.3/css/font-awesome.css" />
<style>
#gamesContainer {
margin-top:120px;
margin-bottom:100px;
}
.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:250px;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
}
.singleGame .gameName {
display:table;
color:black;
font-family:basics;
font-size:50px;
margin:0 auto;
margin-bottom:30px;
text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
}
#ourGames {
text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
color:black;
font-size:80px;
font-family:basics;
color:black;
margin-left:50px;
margin-bottom:120px;
padding-bottom:25px;
border-bottom:6px groove #464646;
box-shadow:0 2px 0 white,0 3px 0 grey;
}
.gameDescriptionBackground {
width:100%;
height:100px;
background-color:black;
opacity:.9;
position:absolute;
bottom:0;
}
.gameDescription {
width:80%;
height:100px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
overflow:hidden;
}
.gameDescriptionHeading {
color:white;
margin:0;
padding:0;
font-family:basics;
text-transform:uppercase;
text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
}
.gameDescriptionPara {
color:white;
text-transform:uppercase;
text-wrap:unrestricted;
font-family:basics;
font-size:13px;
padding-left:30px;
}
</style>
</head>
<body>
<div id="navBarContainer">
<ul id="topNav">
<li><a href="metacore.html">Home</a></li>
<li><a href="#" style="color:black;background-color:#cac9c9;">Games</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="gamesContainer">
<h1 id="ourGames">Our Published Games:</h1>
<div class="singleGame">
<h1 class="gameName">Vain Instinct</h1>
<div class="games" style="background:url('game1.jpg') -120px -50px">
<div class="gameDescriptionBackground"></div>
<div class="gameDescription">
<h2 class="gameDescriptionHeading">Best Selling Ios Game In 2017</h2>
<p class="gameDescriptionPara">This Was Our First Game, it revolves around the story of around the story of a band of teenagers survive the dangers of an environment where beast and man alike are your enemies, the game was named an example of excellent storytelling and a dramatic gaming experience</p>
</div>
</div>
</div>
</div>
<div id="socialContainer" >
<a href="#" target="_blank"><i class="fa fa-facebook" style="background-color:#3b5998;"></i></a>
<a href="#" target="_blank"><i class="fa fa-github" style="background-color:#212121;"></i></a>
<a href="#" target="_blank"><i class="fa fa-google" style="background-color:#d62d20;"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter" style="background-color:#2ba7e3;"></i></a>
<a href="#" target="_blank"><i class="fa fa-vk" style="background-color:#44678d;"></i></a>
</div>
<script>
</script>
</body>
</html>
最佳答案
在 .games 上使用 padding - 根据您的内容调整值。
关于html - 如何在我的文本周围制作一个圆形边框的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38004033/