Question

我正在尝试使用border-radius属性为容器div之一赋予圆角。但是，当我这样做时，在容器div中渲染的文本区域会阻塞div的左下角和右下角。如何调整css，使其不再发生，并且文本区域按我想要的方式工作？

App.js

<Icon src="{= ${propertyname} === 'somevalue' ? 'sap-icon://arrow-top' : 'sap-icon://arrow-bottom'}"/>

App.css

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;

Answer 1

在将border-radius添加到<div />时，它实际上是在div具有的空间中“弯曲”，这导致内部文本区域使容器溢出。

我可以通过两种方式处理此问题。您可以在textContainer div中添加填充：

padding: 1rem;

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

overflow: hidden;

这应该使边框保持完整。

Answer 2

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

Answer 3

如果您不想给 .textContainer

填充，也可以在文本框中添加边框半径。

更改div边框半径会使边框的一部分消失

3 个答案: