标签: border-radius

如果我在表格标签上具有边框折叠属性，则我的边框半径不会显示。我需要打开 border-radius 属性，如果删除 border-collapse 属性，我就看不到我想要的外观，即灰色部分到达表格的最边缘。

解决这个问题的方法是什么？其原因是什么？

提前致谢

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

table {
  /*if i comment out the border-collapse property it then shows my radius*/
  border-collapse: collapse;
  margin: 25px 0;
  width: 50%;
  border-radius: 5px;
  font-size: 1.4rem;
  min-width: 400px;
  border: 1px solid #c3c3c3;
  /*margin is just for demo*/
  margin: 20px 20px;
}

table tr {
  border-bottom: solid 1px #d1d1d1;
}

table tr:nth-child(odd) {
  background-color: #eee;
}

table td {
  padding: 10px 15px;
}

table td:first-of-type { …

我有一个游戏看起来有点像 1980 年的游戏。我有这个对话框：

#firstPageText {
            width: 300px;
            min-height: 100px;
            border: 2px solid;
            padding: 1em;
            margin: 0;
            position: absolute;
            bottom: 50px;
            left: 50%;
            -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
            font-family: 'Press Start 2P', cursive;
            border-radius: 5px;
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<p id="firstPageText">
  This is a test text.
</p>

我想在这个对话框中添加一个边界半径，就像 pokemon 中的那些：

有没有办法实现这种像素化的边界半径，而不是圆形的边界半径？

在下面的示例代码片段中，我尝试对.container元素的最后一个子元素施加与 相同的border-radius效果.container，以便当最后一个子元素在悬停时突出显示时，其背景会遵循父元素的形状。在我以像素设置的特定情况下，这似乎工作得很好。border-radius

.container {
  display: block;
  width: 10em;
  border: 1px solid #999;
  border-radius: 0 0 20px 0;
  box-shadow: 0.1em 0.1em 0.4em black;
}

.entry:hover {
  background-color: #aaa;
}

.entry:last-child {
  border-radius: inherit;
}

<div class="container">
  <div class="entry">
  First
  </div>
  <div class="entry">
  second
  </div>
  <div class="entry">
  third
  </div>
</div>

但是，如果我使用ems，例如2em代替20px，事情会像这样中断：

我猜这是因为父级的曲率延伸得比最后一个子级的高度更高。事实上，如果我更改20px为50px我会得到这个：

因此，我认为20px我只是幸运，而border-radius试图让孩子遵循父母的形状的整体继承方法是错误的。事实上，在 的最后一个示例中50px，第二个条目必须被裁剪掉，而这根本无法通过 获得 …

如何将内部边框半径应用于我的元素，如下所示，边框半径将其应用于外部阴影

我的是什么样子的：

代码：

        const getCheckListData = (): React.ReactNode => {
    return checkListJSON.map(
        (checklist: CheckListInterface, index: number): React.ReactNode => {
            return (
                <View style={[styles.checkListTile, styles.checkListTileGreen]} key={index}>
                    <Text style={styles.checkListTileText}>{checklist.value}</Text>
                </View>
            );
        },
    );
};

 

    checkListTileGreen: {
            shadowColor: ThemeConfigs.defaultColors.primaryLightColor,
            shadowOpacity: ThemeConfigs.defaultCard.shadowOpacity,
        },
            checkListTile: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            flexShrink: 1,
            width: wp('28%'),
            height: hp('15%'),
            marginTop: hp('1.5%'),
            marginRight: wp('1.5%'),
            color: ThemeConfigs.defaultColors.textSecondaryColor,
            shadowOffset: {
                width: 1,
                height: 0,
            },
            elevation: 10,
            borderRadius: hp('2%'),
        },

我正在使用 React、HTML 和 CSS 制作这张卡片

这是我的代码：

<div className="plan">
  <div className="plan-name">
    <h5>BASIC</h5>
  </div>
  <div className="plan-price">
    <h2>$ 6.99</h2>
    <span>Screen Availabilty Simultaneously</span>
  </div>
  <div className="plan-details">
    <ul>
      <li>
        <span>
          <CheckIcon />
        </span>
        Access to All Library in Unlimited
      </li>
      <li>New Content Monthly</li>
      <li>Available on PC, Smartphones and tablet</li>
      <li>Drawing in Color</li>
      <li>Color in Very High Quality</li>
      <li>Canceable at Any Time</li>
    </ul>
  </div>
</div>

CSS：

.plan {
    border-radius: 25px;
    overflow: hidden;
    background-color: #fff;
}

.plan-name {
    background-color: #3e104f;
    padding: 25px 0;
    border-style: solid;
    border-width: 0; …

div想象一下有一个圆形的父母border-radius。有没有办法让imgdiv 适合内部，使其也符合圆形边框？

.parent-div {
  background-color: gray;
  border-radius: 20px;
}

.image {
  width: 100%
}

<div class="parent-div">
  <img class="image" src="/a-cool-image">
  <p>Some text</p>
</div>

这只会导致图像具有方角，而 div 的底部具有圆角。我知道的唯一解决方法是让图像具有相同的 border-radius 属性，但仅在顶部两个角。我发现这是一个烦人的解决方法。