我正在制作一个div,我想让两边都圆润。问题是我不希望角落是圆的而是尖锐的。有什么建议吗?
答案 0 :(得分:1)
like tv screen
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
答案 1 :(得分:1)
我不确定我理解你要求的是什么,但是它是这样的吗?
你可以通过使用两个div来实现它:
<div class="container">
<div class="inner">
Here's some text
</div>
</div>
然后,您只需将背景图像添加到&#34;容器&#34; div或玩CSS。这是我在上一个例子中使用的内容:
<style type="text/css">
.container {
border-radius: 80px;
background-color: #d6d6d9;
padding: 10px;
width: 200px;
}
.inner {
background-color: #d6d6d9;
padding: 40px;
text-align: center;
}
</style>
我强烈建议您上传图片以澄清您的请求。