پاسخ داده شد
با کدام ویژگی css می توانیم شکل های انحنا دار بسازیم؟
- نفیسه افقی 2 سال قبل سوال کرد
- آخرین ویرایش 2 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ عالی
یکی از ویژگی های پرطرفدار css که برای این کار کاربرد دارد، border-radius
است. به راحتی با نوشتن کدی همانند:
;border-radius: 4px
می توانید یک شکل انحنادار ایجاد کنید.
می دانستید که با این ویژگی می توانید دایره نیز ایجاد کنید؟ تنها کاری که لازم است انجام دهید اینست که radius را به نصف عرض یا ارتفاع عنصر تنظیم کنید:
;border-radius:
50px
کدهای زیر این شکل ها را تولید می کنند:

:HTML
<div class="box"><p>My Box</p></div>
<div class="circle">
<p>Hello</p>
</div>
:CSS
body {
margin: 20px auto;
font-family: "Lato";
font-weight: 300;
padding: 20px;
}
.box {
border-radius: 4px;
background: red;
width: 200px;
height: 200px;
line-height: 50px;
text-align: center;
margin: 20px;
color: white;
font-size: 1.4rem;
float: left;
}
.circle {
background: red;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 600;
margin: 20px;
}
اگر هم بخواهید نوشته را وسط چین کنید (هم عمودی هم افقی)، می توانید از کدهای زیر استفاده کنید:
display: flex;
align-items: center;
justify-content: center;
- نفیسه افقی 2 سال قبل پاسخ داد
- آخرین ویرایش 2 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ شما