在css中如何将边框只应用于容器的角上？[duplicate]

wvmv3b1j 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(138)

- 此问题在此处已有答案**：

How can I show only corner borders?（20个答案）
2天前关闭。
我想只在容器的特定角落应用一个边框，类似于下图。在汇总容器的角落有一个小边框。我该如何实现呢？提前感谢你。

css

来源：https://stackoverflow.com/questions/75607228/how-can-you-apply-a-border-to-only-corners-of-a-container-in-css

3条答案

按热度按时间

zzlelutf1#

这个答案更关注方法而不是漂亮的设计或图案。方法是：

1x div作为具有相对位置的项容器
4x div作为角，绝对位置位于左上、右上、右下和左下，并将其相应的角边界半径显示为1/4弧。
1.记住border-radius有4个值为每个角落一样0px 0px 5px 5px绘制半径只在右下角和左下角，为您的第一个顶部的图像。
最后看起来是这样的：

HTML代码，比如index.html

<html>
<head>
  <title>Design</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Design</h1>

  <div id="reaction" class="item">
    <div id="top-left" class="corner"></div>
    <div id="top-right" class="corner"></div>
    <div id="bottom-right" class="corner"></div>
    <div id="bottom-left" class="corner"></div>
    <div class="content">
      <img src="icon.png" class="icon" />
      <span class="title">Reaction</span>
      <span class="score">80 / 100</span>
    </div>
  </div>
</body>
</html>

以及CSS代码styles.css：

.item {
  position: relative;
  border-radius: 5px;
  max-width: 300;
}
#reaction {
  background-color: #ffaaaa70;
}
.corner {
  position: absolute;
}
#reaction .corner {
  background: none;
  height: 10px;
  width: 10px;
}
#top-left {
  top: 0;
  left: 0;
  border-radius: 5px 0 0 0;
  border-top: 2px solid #ff7777;
  border-left: 2px solid #ff7777;
}
#top-right {
  top: 0;
  right: 0;
  border-radius: 0 5px 0 0;
  border-top: 2px solid #ff7777;
  border-right: 2px solid #ff7777;
}
#bottom-right {
  bottom: 0;
  right: 0;
  border-radius: 0 0 5px 0;
  border-bottom: 2px solid #ff7777;
  border-right: 2px solid #ff7777;
}
#bottom-left {
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 5px;
  border-bottom: 2px solid #ff7777;
  border-left: 2px solid #ff7777;
}
.content {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.icon {
  height: 24;
  width: 24;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
#reaction .title {
  color: #ff7777;
}
.score {
  color: '#444444'
}

从那里你可以申请其他项目与自己的颜色，并使用适当的模式，如果使用CSS框架。

赞(0）回复(0）举报 2023-03-05

hec6srdp2#

边框-下-右-半径：25px;左下边框半径：25像素;
你可以把它写在一行里。
边界半径：0px 0px 25px 25px;
要为每个角设置不同的值，请使用以下语法
边界半径：左上右上右下右下左;

赞(0）回复(0）举报 2023-03-05

rjee0c153#

边界半径：0像素x 0像素x 30像素x 30像素;
第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。

赞(0）回复(0）举报 2023-03-05