مشکل در ایجاد border-radius برای Card
با سلام در کد زیر که نوشتم متاسفانه برای card
border-radius=10% ایجاد نمیکند
border-radius نمیشه گذاشت در کل
<style>
.img-box{
overflow: hidden;
}
.img_article{
transition: transform 0.4s linear;
}
.img_article:hover{
transform: scale(1.1,1.1);
}
.article .card-footer{
background-color: #fff;
border-top: none;
}
.btn_circle{
width: 3rem;
height: 3rem;
border-radius:50% ;
}
</style>
<div class="card article">
<div class="img-box">
<img src="img/Digital_Marketing.jpg" alt="article" class="card-img-top img_article">
</div>
<div class="card-body">
<h2 class="card-title article_title">
<a href="#">
۴ مرحله آسان برای دیجیتال مارکتینگ
</a>
</h2>
<p class="card-text">
در بازاریابی دیجیتال برای بهبود مستمر، تمرکز باید بر روی یافتن هدف، مثبت ماندن،
</p>
</div>
<div class="card-footer d-flex justify-content-end align-items-center">
<a href="#" class="btn btn-warning btn_circle d-flex align-items-center justify-content-center">
<i class="fas fa-arrow-left"></i>
</a>
</div>
</div>گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@sinashahoveisi ممنون از راهنمایی شما ، راستش موضوع با یک راه ساده تر حل شد ، برای دو مورد زیر هم من اعمال کردم border-radius.
.card-img-top{
border-top-right-radius:calc(1rem - 1px)!important ;
border-top-left-radius: calc(1rem - 1px)!important;
}
.card-footer{
background-color: #fff;
border-bottom-right-radius:calc(1rem - 1px)!important ;
border-bottom-left-radius: calc(1rem - 1px)!important;
}
به جای % از px استفاده کنید و اگه عددی که برای px در نظر میگیرید بزرگ باشه در واقع همون کار درصد رو هم انجام میده و با بالا پایین کردن این عدد به نتیجه دلخواهتون میرسید
و اینکه از important هم استفاده کنید چون خود کلاس btn هم radius داره و این کار باعث میشه که radius شما رو اولویت قرار بده
border-radius:50px !importantممنون از پاسختون ولی بحث سر پیکسل یا درصد نیست کلا هر چی که بزارم دور کارد سفید میشه و بالا که عکس وجود داره اصلا تکون نمیخوره و فقط بوردر کنار میره.
سلام از کد زیر استفاده کنید.
<head>
<style>
.card {
margin-top: 1rem;
width: 450px;
height: 400px;
background: aquamarine;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10%;
direction: rtl;
}
.img {
border-radius: 10%;
}
.img:hover {
transform: scale(1.1,1.1);
}
.button {
text-decoration: none;
background-color: cornsilk;
padding: 0.8rem;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="card">
<div >
<img src="https://roocket.ir/public/images/2020/4/15/learn-code.png" alt="article"class="img">
</div>
<div class="card-body">
<h2 class="card-title article_title">
<a href="#">
4 مرحله آسان برای دیجیتال مارکتینگ
</a>
</h2>
<p class="card-text">
در بازاریابی دیجیتال برای بهبود مستمر، تمرکز باید بر روی یافتن هدف، مثبت ماندن،
</p>
</div>
<div>
<a class="button" href="https://www.w3schools.com">ok</a>
</div>
</div>
</body>@sinashahoveisi ممنون از راهنمایی شما ، راستش موضوع با یک راه ساده تر حل شد ، برای دو مورد زیر هم من اعمال کردم border-radius.
.card-img-top{
border-top-right-radius:calc(1rem - 1px)!important ;
border-top-left-radius: calc(1rem - 1px)!important;
}
.card-footer{
background-color: #fff;
border-bottom-right-radius:calc(1rem - 1px)!important ;
border-bottom-left-radius: calc(1rem - 1px)!important;
}