Border-radius 和 box-shadow 属性不影响代码

Posted 2023-03-28

技术标签:

【中文标题】Border-radius 和 box-shadow 属性不影响代码【英文标题】：Border-radius and box-shadow attributes doesnt affect the code 【发布时间】：2021-08-31 16:43:28 【问题描述】：

大家好，我正在尝试将 box-shadow 和边框半径添加到我的 .card 元素中。但什么也没有发生。我该如何解决这个问题。为什么会这样？我有一个关于弹性盒的理论。

还有谁可以批评我的班级命名。我第一次在这里尝试使用 BEM 方法。为它们设计样式和命名它们的时间很长。我做得对吗？

* 
  box-sizing: border-box; 

body 
  background-color: #8F91A2;
  font-size: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  top: 250px; 

.card 
  width: 45rem;
  height: 17rem;
  background-color: #1E1E24;
  display: flex;
  flex-direction: row-reverse;
  border-radius: 100%; 
  .card__img, .text-box 
    background-color: white;
    width: 40%;
    height: 100%; 
    .card__img img, .text-box img 
      width: 100%;
      height: 100%; 

.text-box 
  width: 60%;
  background-color: #1E1E24; 
  .text-box__up 
    width: 80%;
    height: 75%;
    padding: 1rem; 
    .text-box__up__header 
      width: 100%;
      height: 45%;
      margin-top: .3rem; 
      .text-box__up__header h1 
        display: inline-block;
        padding: 0.3rem;
        margin-left: 3rem;
        font-family: 'Staatliches', cursive;
        color: white;
        margin-top: 0px;
        font-size: 1.6rem;
        text-align: center; 
    .text-box__up__text 
      width: 80%;
      height: 25%;
      margin-left: 3rem;
      margin-top: .7rem;
      padding: .2rem;
      font-family: 'Montserrat', sans-serif;
      color: #FFD046;
      text-align: center;
      font-size: .6rem; 
  .text-box__down 
    width: 80%;
    height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: .2rem;
    margin-left: 2rem; 
    .text-box__down__element 
      display: inline-block;
      color: white; 
      .text-box__down__element h2 
        margin-top: 0px;
        margin-bottom: 0rem;
        font-family: 'Staatliches', cursive; 
      .text-box__down__element span 
        font-family: 'Montserrat', sans-serif;

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Staatliches&display=swap" rel="stylesheet">
    </head>
    
    <body>
        <div class="container">
            <div class="card">
                <div class="card__img"><img
                        src="https://images.unsplash.com/photo-1623654517565-d9886645bb8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80"
                        ></div>
                <div class="text-box">
                    <div class="text-box__up">
                        <div class="text-box__up__header">
                            <h1>Get insights that help grow your business</h1>
                        </div>
                        <div class="text-box__up__text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima a sapiente consequuntur
                                aliquid
                                minus labore magni aspernatur, nam, aperiam.
                            </p>
                        </div>
                    </div>
                    <div class="text-box__down">
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
    </body>
    
    </html>

【问题讨论】：

box-shadow 似乎工作正常，也许您发现了其他问题？关于边界半径属性，这是我们有时会遇到的一个非常常见的错误。只需将 .card 的 overflow 设置为 hidden。这样可以确保边框如您所愿，并且内部元素不会从其中出来。 【参考方案1】：

编辑：

body：删除了overflow 和top 属性。添加了align-items: center;和height: 100vh；

body 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

card: overflow: hidden; 隐藏角落加上box-shadow 和border-radius。

.card 
  box-shadow: 0 0 10px 10px lightskyblue;
  overflow: hidden;
  border-radius: 30px;

代码：

* 
  box-sizing: border-box; 


body 
  background-color: #8F91A2;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;


.card 
  width: 45rem;
  height: 17rem;
  background-color: #1E1E24;
  display: flex;
  flex-direction: row-reverse;
  box-shadow: 0 0 10px 10px lightskyblue;
  overflow: hidden;
  border-radius: 30px;


.card__img, .text-box 
  background-color: white;
  width: 40%;
  height: 100%; 

  
.card__img img, .text-box img 
  width: 100%;
  height: 100%; 


.text-box 
  width: 60%;
  background-color: #1E1E24; 

  
.text-box__up 
  width: 80%;
  height: 75%;
  padding: 1rem; 


.text-box__up__header 
  width: 100%;
  height: 45%;
  margin-top: .3rem;


.text-box__up__header h1 
  display: inline-block;
  padding: 0.3rem;
  margin-left: 3rem;
  font-family: 'Staatliches', cursive;
  color: white;
  margin-top: 0px;
  font-size: 1.6rem;
  text-align: center; 


.text-box__up__text 
  width: 80%;
  height: 25%;
  margin-left: 3rem;
  margin-top: .7rem;
  padding: .2rem;
  font-family: 'Montserrat', sans-serif;
  color: #FFD046;
  text-align: center;
  font-size: .6rem; 
 

.text-box__down 
  width: 80%;
  height: 25%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .2rem;
  margin-left: 2rem; 


.text-box__down__element 
  display: inline-block;
  color: white;


.text-box__down__element h2 
  margin-top: 0px;
  margin-bottom: 0rem;
  font-family: 'Staatliches', cursive; 


.text-box__down__element span 
  font-family: 'Montserrat', sans-serif;

<div class="container">
    <div class="card">
        <div class="card__img"><img
                src="https://images.unsplash.com/photo-1623654517565-d9886645bb8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80"
                ></div>
        <div class="text-box">
            <div class="text-box__up">
                <div class="text-box__up__header">
                    <h1>Get insights that help grow your business</h1>
                </div>
                <div class="text-box__up__text">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima a sapiente consequuntur
                        aliquid
                        minus labore magni aspernatur, nam, aperiam.
                    </p>
                </div>
            </div>
            <div class="text-box__down">
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【参考方案2】：

我稍微清理了你的代码，border-radius 现在可以工作了，感谢@Robo Mop 对评论的洞察力，overflow:hidden; 已添加到卡片类中。我建议使用 Bootstrap，它会让你的生活更轻松，并尝试更好地组织你的 HTML 和 CSS。有了 cmets 就更好了。

* 
  box-sizing: border-box;

body 
    background-color: #8F91A2;
    font-size: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    top: 250px; 

.card 
    overflow:hidden;
    width: 45rem;
    height: 17rem;
    background-color: #1E1E24;
    display: flex;
    flex-direction: row-reverse;
    border-radius:100%;

.card__img, .text-box 
    background-color: white;
    width: 40%;
    height: 100%; 

.card__img img, .text-box img 
   width: 100%;
   height: 100%; 

.text-box 
  width: 60%;
  background-color: #1E1E24; 

.text-box__up 
  width: 80%;
  height: 75%;
  padding: 1rem; 

.text-box__up__header 
  width: 100%;
  height: 45%;
  margin-top: .3rem; 

.text-box__up__header h1 
  display: inline-block;
  padding: 0.3rem;
  margin-left: 3rem;
  font-family: 'Staatliches', cursive;
  color: white;
  margin-top: 0px;
  font-size: 1.6rem;
  text-align: center; 

.text-box__up__text 
  width: 80%;
  height: 25%;
  margin-left: 3rem;
  margin-top: .7rem;
  padding: .2rem;
  font-family: 'Montserrat', sans-serif;
  color: #FFD046;
  text-align: center;
  font-size: .6rem; 

.text-box__down 
  width: 80%;
  height: 25%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .2rem;
  margin-left: 2rem; 

.text-box__down__element 
  display: inline-block;
  color: white; 

.text-box__down__element h2 
  margin-top: 0px;
  margin-bottom: 0rem;
  font-family: 'Staatliches', cursive; 

.text-box__down__element span 
  font-family: 'Montserrat', sans-serif;

<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Staatliches&display=swap" rel="stylesheet">
  </head>
    
  <body>
    <div class="container">
        
        <!-- Card start -->
        <div class="card">
        
            <div class="card__img">
              <img src="https://images.unsplash.com/photo-1623654517565-d9886645bb8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80" >
            </div>
            
            <div class="text-box">
                <div class="text-box__up">
                    <div class="text-box__up__header">
                        <h1>Get insights that help grow your business</h1>
                    </div>
                    <div class="text-box__up__text">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima a sapiente consequuntur
                            aliquid
                            minus labore magni aspernatur, nam, aperiam.
                        </p>
                    </div>
                </div>
                <div class="text-box__down">
                    <div class="text-box__down__element">
                        <h2>10K+</h2>
                        <span>Companies</span>
                    </div>
                    <div class="text-box__down__element">
                        <h2>10K+</h2>
                        <span>Companies</span>
                    </div>
                    <div class="text-box__down__element">
                        <h2>10K+</h2>
                        <span>Companies</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of card -->
        
     </div>
  </body>
</html>

【讨论】：

以上是关于Border-radius 和 box-shadow 属性不影响代码的主要内容，如果未能解决你的问题，请参考以下文章

利用border和border-radius绘制一些小图片

border-radius:50%和100%究竟有什么区别

border-radius

border-radius 两个值原理