border-radius 和 box-shadow 属性不影响代码
Border-radius and box-shadow attributes doesnt affect the code
大家好,我正在尝试为我的 .card 元素添加框阴影和边框半径。但是没有任何反应。我该如何解决这个问题。为什么会这样? İ 有一个理论,它是关于 flexbox 的。
还有谁可以批评我的 class 命名。 © 第一次在这里尝试使用 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"
alt=""></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>
我稍微清理了你的代码,border-radius
现在可以正常工作了,感谢@Robo Mop 对评论的洞察力,overflow:hidden;
已添加到卡片 class 中。我建议 Bootstrap,它会让你的生活更轻松,也会尝试更好地组织你的 HTML 和 CSS。有评论更好。
* {
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" alt="">
</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>
编辑:
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"
alt=""></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>
大家好,我正在尝试为我的 .card 元素添加框阴影和边框半径。但是没有任何反应。我该如何解决这个问题。为什么会这样? İ 有一个理论,它是关于 flexbox 的。
还有谁可以批评我的 class 命名。 © 第一次在这里尝试使用 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"
alt=""></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>
我稍微清理了你的代码,border-radius
现在可以正常工作了,感谢@Robo Mop 对评论的洞察力,overflow:hidden;
已添加到卡片 class 中。我建议 Bootstrap,它会让你的生活更轻松,也会尝试更好地组织你的 HTML 和 CSS。有评论更好。
* {
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" alt="">
</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>
编辑:
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"
alt=""></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>