为啥我的边框半径只出现在浏览器的边缘？

Posted

技术标签:

【中文标题】为啥我的边框半径只出现在浏览器的边缘？【英文标题】：Why does my border radius only appear at the edge of the browser?为什么我的边框半径只出现在浏览器的边缘？ 【发布时间】：2021-10-16 04:23:57 【问题描述】：

https://faylette.github.io/3-column-preview-card-component-main/

我正在解决这个问题并尝试将边框半径应用于包含元素，它确实会出现，但仅在元素接触浏览器边缘时才会出现。无论 flex-direction 是行还是列，都会发生这种情况。

border radius disappearing when not touching edge of browser

border radius appearing as desired when touching edge of browser

这里是相关的 CSS 代码。

/* contains each of the containers (car cards) */
.content 
    display: flex;
    overflow: hidden;
    border-radius: 10px;


/* each car card */
.container 
    width: 350px;
    padding: 40px;


div#sedans 
    background-color: hsl(31, 77%, 52%);


div#suvs 
    background-color: hsl(184, 100%, 22%);


div#luxury 
    background-color: hsl(179, 100%, 13%);


@media (max-width: 600px) 
    .content 
        flex-direction: column;
        width: 500px;
    

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>

如果我在问这个问题时做错了什么，请告诉我如何解决这个问题，因为这是我在 Stack Overflow 上的第一篇文章。谢谢！

【问题讨论】：

请在您的问题中添加可重现的代码，包括相关的css和html 只是为了澄清。您的最后一张豪华卡右侧没有边框？这就是问题？ 卡片容器在接触浏览器边缘时右侧没有边框半径。所以是的，当容器有 flex-direction: 行时，豪华卡没有边框半径。 【参考方案1】：

这是因为你的容器是圆形的，而不是里面的元素，你只看到它是overflow:hidden; 的效果。如果您的元素总是占用父级 (.content) 的 100% 宽度，那就没问题了。

你可以做的是在内容中设置第一个和最后一个元素的样式：

* 
    box-sizing: border-box;


/* font-family: 'Big Shoulders Display', cursive;
font-family: 'Lexend Deca', sans-serif; */

body 
    font-size: 15px;


/* contains each of the containers (car cards) */
.content 
    display: flex;
    overflow: hidden;
    /* something wonky going on with the border-radius */


/* each car card */
.container 
    width: 350px;
    padding: 40px;


div#sedans 
    background-color: hsl(31, 77%, 52%);


div#suvs 
    background-color: hsl(184, 100%, 22%);


div#luxury 
    background-color: hsl(179, 100%, 13%);



h2 
    color: hsl(0, 0%, 95%);
    font-family: 'Big Shoulders Display', cursive;
    text-transform: uppercase;
    font-size: 30px;


p 
    font-family: 'Lexend Deca', sans-serif;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.5;
    margin-bottom: 75px;


button 
    background-color: hsl(0, 0%, 95%);
    border: 2px solid hsl(0, 0%, 95%);
    font-family: 'Lexend Deca', sans-serif;
    border-radius: 20px;
    padding: 10px 20px;


.btn1 
    color:hsl(31, 77%, 52%);


.btn2 
    color: hsl(184, 100%, 22%);


.btn3 
    color: hsl(179, 100%, 13%);


button:hover 
    cursor: pointer;
    background-color: transparent;
    color: hsl(0, 0%, 95%);


@media (max-width: 600px) 
    .content 
        flex-direction: column;
    



/* ADDED CODE */
.content .container:first-child 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;



.content .container:last-child 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Kitty</a>.
  </div>

【讨论】：

【参考方案2】：

您所要做的就是在您的content 上使用inline-flex 而不是flex。您的问题是由于 content 元素占用 100% 宽度，而不是您的弹性项目。

但是当你调整浏览器的大小或者当元素接触到边缘时，你的 flex 容器会变小，overflow:hidden 生效，你的border-radius 会按预期工作。

所以当您使用inline-flex 时，content 的宽度将保持等于您的项目的宽度。

但这会导致其他问题，例如元素溢出视口等，为此您可以使用content 的媒体查询在一定宽度后使用 flex 而不是 inline flex，在您的情况下约为 1300px。

另一个问题：

我注意到当宽度小于 600 像素时，您的单个容器不会显示边框半径属性，您可以执行以下操作： 由于您没有将边框半径应用于 content 而是整个 container 本身，这就是为什么它们单独不显示 border-radius 属性的原因。 但是如果你给container加上border-radius，那么它就会失去它现在的形式。

所以你可以做的是使用 媒体查询 并在一定宽度的页面定义/显示边框半径为container。

在所有这些之后，您的代码应该如下运行：

/* contains each of the containers (car cards) */
.content 
    display: inline-flex;
    overflow: hidden;
    border-radius: 10px;


/* each car card */
.container 
    width: 350px;
    padding: 40px;


div#sedans 
    background-color: hsl(31, 77%, 52%);


div#suvs 
    background-color: hsl(184, 100%, 22%);


div#luxury 
    background-color: hsl(179, 100%, 13%);

@media (max-width: 1300px)
    .content
        display:flex;
        

@media (max-width: 600px) 
    .content 
        flex-direction: column;
        width: 500px;  
        gap:2px;
    
    .container
    border-radius:10px;
    

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>

【讨论】：

以上是关于为啥我的边框半径只出现在浏览器的边缘？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的链接卡在浏览器的顶部边框上？ [复制]

图像裁剪父元素的边框半径？ （苹果浏览器）

CSS 跨浏览器CSS3边框半径（圆角）

由于边框折叠属性，表格的边框半径不起作用

带有白色边框的警报控制器

css 如果在使用边框半径时元素的背景正在啜饮，请使用background-clip：padding-box;告诉浏览器扩展