EN

Search
Close this search box.

موستانگ، وحشیِ دوست داشتنی

پاسخ داده شد
0
0

با کدام ویژگی css می توانیم شکل های انحنا دار بسازیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

یکی از ویژگی های پرطرفدار css که برای این کار کاربرد دارد، border-radius است. به راحتی با نوشتن کدی همانند:

;border-radius: 4px

می توانید یک شکل انحنادار ایجاد کنید.

می دانستید که با این ویژگی می توانید دایره نیز ایجاد کنید؟ تنها کاری که لازم است انجام دهید اینست که radius را به نصف عرض یا ارتفاع عنصر تنظیم کنید:

;border-radius: 50px
کدهای زیر این شکل ها را تولید می کنند:
شکل های انحنادار با CSS - موستانگ
: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;
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت