تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

متفرقه CSS-گرد کردن گوشه ها

گرد کردن گوشه ها در CSS

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

دلیل اینکه درصد نمی دهیم بخاطر مستطیل است، در واقع چون طول و عرض با هم متفاوت هستند حالت گرد به خود نمی گیرد (نسبت طول به عرض برای گرد کردن) ولی برای مربع می توان از درصد استفاده کرد.

در مثال زیر فقط مربع می باشد که کافیست یکی از مقادیر را کمتر یا بیشتر از دیگری کنید تا مستطیل نیز شکل بگیرد:

گرد کردن گوشه ها در CSS

.squircle {
width: 100px;
height: 100px;
background-color: #0088FF;
border-radius: 10px;
}
خودتان امتحان کنید »

بیاموزها مرتبط

CSS height/width (آموزش CSS)

border-radius (مرجع خصوصیت های CSS)

background-color (مرجع خصوصیت های CSS)

دیدگاه‌ها  

+6 # امیرمحمد 1393-09-20 10:09
سلام می خواستم بپرسم میشه آموزش نحوه گرد کردن گوشه textboxرو نیزبگذارید؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-09-20 10:12
سلام، از همان خصوصیت border-radius استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی