تبلیغات
طراحی و بهینه سازیمشاهده

هاست

گوشه های گرد در CSS3،بررسی Border-radius

CSS / HTML , آموزش طراحی

گوشه های گرد در CSS3،بررسی Border radius

با به روی کار آمدن html5 و CSS3 دنیای طراحی وب تغییری اساسی کرد. امکانات بسیار زیادی به نسخه های جدید html و css شده که تقریبا هر چیزی را طراحی کنید ،  امروز میخوایم درباره گوشه های گرد به طور کامل صحبت کنید ، گوشه های گرد رو میتونید با استقاده از Border-radius ایجاد کنید.

خیلی از طراحان با خاصیت border-radius آشنا هستند اما در واقع این خاصیت چیزی بیشتر از border-radius : 5px; هست ، امروز یکم عمیق تر این خاصیت رو بررسی میکنیم و به شما نشون میدیم که چجوری میشه تک تک گوشه ها رو گرد کرد یا اینکه چجوری میشه به صورت افقی و عمودی گوشه ها را گرد کرد.

خوب معمولی ترین border-radius به این صورت هست :

که تمام گوشه ها را به اندازه ۵ پیکسل گرد میکند.

برای این که هر گوشه رو جداگانه گرد کنیم انجوری عمل میکنیم :

گوشه های گرد در CSS3،بررسی Border radius

همش همین نبود ، به وسیله border-radius میتونیم گردی افقی و عمودی هر گوشه را کنترل کنیم :

گوشه های گرد در CSS3،بررسی Border radius

همچنین میتونم به هر گوشه به طور جداگانه این خاصیت رو اعمال کنیم :

یا

خوب مسائل اساسی border-radius را گفتیم ، برای ورژن های قدیمی مرورگر های فایرفاکس و کروم باید از -webkit و -moz استفاده کنیم که استفاده از -moz کمی متفاوت با چیزی است که تاحالا گفتیم

برای -webkit هم کافیست به جای border-radius بنویسید  : -webkit-border-radius

لطفا به این مطلب امتیاز بدید


دانلود


هاست مناسب برای تمامی اسکریپت های 20script MyHBD.net >

هاست
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 3 CSS / HTML , آموزش طراحی

لینک کوتاه مطلب : https://www.20script.ir/?p=97

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
5,957دانلود منوی زیبای نیم دایره CSS3 تاریخ : 2013/10/24
8,487نمایش متن به صورت اسلاید تاریخ : 2013/10/29
4,707دانلود پوسته شرکتی و واکنش گرای BigBang برای وردپرس تاریخ : 2014/12/29
4,500تصاویر سایت خود را با Web Image Masks قاب کنید تاریخ : 2014/11/3
8,273دانلود قالب HTML مترو و چندمنظوره STYLISH تاریخ : 2016/04/20
11,461دانلود قالب چندمنظوره Salient برای وردپرس تاریخ : 2015/05/18
5,325صفحه لاگین مترو به صورت CSS3 تاریخ : 2013/11/22
7,399اسلایدر جدید و حرفه ای CSS3 تاریخ : 2013/11/14
4,495دانلود پوسته عکاسی Fashion9 برای وردپرس تاریخ : 2016/04/22
11,618قالب HTML ایمیل و خبرنامه Material با قابلیت صفحه ساز آنلاین تاریخ : 2017/04/27
4,005اسکریپت راه اندازی مخزن کد رنگ ها CSSGradients تاریخ : 2017/12/2
5,646افزونه ایجاد کتاب های سه بعدی Real 3D FlipBook نسخه 2.9.4 تاریخ : 2015/11/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب