改变div边框半径导致部分边框消失。

Question

我正在尝试使用border-radius属性为我的容器div之一添加圆角边缘。但是，当我这样做时，在容器div中呈现的文本区域会阻挡该div的左下角和右下角。

如何调整我的CSS以避免这种情况，并使文本区域按照我的要求工作？

App.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;

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;
}

- Perplexityy

---

你有一个可以分享的代码沙盒吗？ - Cameron Downer

https://codesandbox.io/s/condescending-albattani-eqqyy - Perplexityy

Answer 1

由于您正在给<div />添加border-radius，这实际上会使该div占用的空间 "向内弯曲"，从而导致其中的文本区域溢出容器。

我可以想到两种解决方法。您可以为textContainer div添加填充：

padding: 1rem;

或者您可以隐藏所有溢出 - 这意味着内部文本区域将被隐藏，而不是放置在 textContainer div 的边界上。

overflow: hidden;

这应该可以保持边框完整。

- Cameron Downer

Answer 2

如果您为.textContainer提供一些填充，它将解决您的问题。

- Mayuri More

Answer 3

如果您不想给.textContainer添加填充，也可以将border-radius添加到您的文本框中。

- Mayuri More