我正在尝试使用 border-radius 属性为我的容器 div 之一提供圆 Angular 边缘。但是,当我这样做时,在容器 div 中呈现的 textareas 会阻塞 div 的左下 Angular 和右下 Angular 。我如何调整我的 css 以便不再发生这种情况,并且文本区域按我想要的方式工作?
应用程序.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
render() {
return (
<div className="screenDiv">
<div className="topContainer">
<div className="textContainer">
<div className="textBoxes">
<div className="leftTextBox">
<textarea className="myText" />
</div>
<div className="rightTextBox">
<textarea className="myText" />
</div>
</div>
<div className="languageDisplay">
<div className="inputLanguage">
<p>English</p>
</div>
<div className="outputLanguage">
<p>Spanish</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
应用程序.css
.screenDiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.topContainer {
height: 80%;
}
.botContainer {
height: 20%;
border-top: 1px solid black;
}
.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
width: 100%;
display: flex;
justify-content: space-between;
}
.textBoxes {
height: 50%;
position: relative;
top: 50%;
border: none;
display: flex;
}
.textContainer {
width: 80%;
height: 36%;
position: relative;
top: 30%;
left: 10%;
right: 20%;
border: 1px solid #161515;
display: flex;
justify-content: space-between;
border-radius: 3%;
}
.languageDisplay {
height: 50%;
position: absolute;
top: 0%;
bottom: 50%;
display: flex;
justify-content: space-between;
}
.inputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
left: 20%;
}
.outputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
right: 20%;
}
.leftTextBox,
.rightTextBox {
width: 50%;
height: 100%;
display: inline-block;
border: none;
}
.myText {
box-sizing: border-box;
width: 100%;
height: 100%;
border: none;
}
最佳答案
当您添加 border-radius
时给您的 <div />
,它实际上是在 div 的空间上“flex ”,导致里面的文本区域溢出容器。
我可以看到有两种方法可以解决这个问题。您可以向 textContainer
添加填充分区:
padding: 1rem;
或者您可以隐藏所有溢出 - 这意味着内部文本区域将被隐藏而不是放置在
textContainer
的边界上。分区:overflow: hidden;
这应该保持边界完整。
关于css - 更改 div 边框半径会使部分边框消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59423813/