ارزدیجیتال
حراجی دامنه های ویژهمشاهده





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

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

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

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

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

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

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

Border-radius : 5px;

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

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

border-top-left-radius    : 8px;
border-top-right-radius   : 7px;
border-bottom-left-radius : 6px;
border-bottom-right-radius: 10px;

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

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

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

 border-radius:150px/200px;

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

border-radius:108px 108px 108px 94px/128px 128px 128px 128px;

یا

border-top-left-radius:150px 200px;
border-top-right-radius:150px 200px;
border-bottom-left-radius:150px 200px;
border-bottom-right-radius:150px 200px;

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

-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

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

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 1 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 3 CSS / HTML , آموزش طراحی
لینک کوتاه مطلب : https://www.20script.ir/?p=97
کلمات کلیدی پست :
مطالب مرتبط
16,681تب های بسیار زیبا در شش افکت حرفه ای CSS3 تاریخ : 2013/11/13
14,550دانلود افزونه تماس با ما Ninja Kick v.2.2.4 برای وردپرس تاریخ : 2015/01/11
11,290افکت های شناور CSS3 تاریخ : 2013/10/30
17,781دستور Border radius در CSS3 تاریخ : 2013/11/2
10,868دانلود قالب وردپرس مجله خبری ورزشی Sportica تاریخ : 2016/02/21
26,575افزونه وردپرس پک افزودنی های ویژوال کامپوسر تاریخ : 2015/04/4
13,371دانلود افکت زیبا و حرفه ای CSS3 تاریخ : 2013/11/30
16,442اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 2016/07/12
12,941دانلود تولتیپ بسیار زیبای CSS3 تاریخ : 2013/10/22
16,304افزونه نمایش ویترین لوگوها برای وردپرس تاریخ : 2016/09/11
37,165اسکریپت فوتر زیبای سایت با CSS3 تاریخ : 2013/11/1
17,578دانلود کد کیبورد بسیار کاربردی فول CSS3 تاریخ : 2013/11/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب