20
تشکر

Border Corner Shape در CSS3

Border Corner Shape

Border Corner Shape

احتمالا شما با خاصیت border-radius آشنا هستید. توسط این خاصیت در CSS3 براحتی میتوان گوشه های گرد برای عناصر ساخت. اما اگر بخواهیم این گوشه ها گرد نباشند چه کاری باید بکنیم؟!

توسط خاصیت border-corner-shape میتوان نوع گوشه ها را مشخص کرد، که انواع آن را میتوانید در تصویر ابتدای همین پست ببینید.

در ادامه همراه ما باشید تا از آن استفاده کنیم…

نحوه استفاده

استفاده تنها از border-corner-shape تاثیری ندارد، بلکه فقط توسط آن ما نوع گوشه ها را مشخص میکنیم، بعد مشخص کردن نوع گوشه ها باید با استفاده از border-radius مقداری برای گوشه ها مشخص کرد.

میتوانید انواع curve, bevel, scoop و notch را در خاصیت border-corner-shape به کار ببرید که هر کدام نوعی خاص هستند.

برای مثال کد زیر و نتیجه آن را میتوانید ببینید:

.box {
  background-color: #3498DB;
  border-corner-shape: scoop;
  border-radius: 30px;
  width: 200px;
  height: 200px;
}
Scoop

Scoop

پشتیبانی

در زمان نوشتار این مطلب، خاصیت border-corner-shape توسط هیچ مرورگری پشتیبانی نمیشود و در آینده این امکان اضافه خواهد شد.

اما برای اینکه بتوانید با این خاصیت کار کنید Lea Verou با شبیه سازی توسط SVG این امکان را با شما میدهد. همچنین در این مطلب میتوانید دموهایی از تصاویر جالبی که توسط border-corner-shape ساخته شده است را مشاهده کنید.

  • مهدی می‌گه:

    خاصیت border-corner-shape تا الان سه تا مقدار براش موجود هست یعنی bevel , notch,scoop

  • یاشار می‌گه:

    ممنون

  • محمد می‌گه:

    سلام سایت جامع و کاربردی خوبیه اگه میشه یه آموزش ساخت مدیریت محتوا با php بزارید ممنون میشم

  • tormahiri می‌گه:

    خیلى متشکرم


  • نظرات این مطلب بسته است.