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

گوشه های گرد در 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
کلمات کلیدی پست :
مطالب مرتبط
8,973افزونه وردپرس ساخت گالری های حرفه ای با Fast Gallery تاریخ : 2015/06/22
10,886دانلود افزونه تماس با ما Ninja Kick v.2.2.4 برای وردپرس تاریخ : 2015/01/11
11,446کد بسیار زیبای تبلیغات متنی فلت به صورت CSS3 تاریخ : 2014/06/27
8,066اسکریپت فروشگاه ساز و سبد خرید LivelyCart 2 تاریخ : 2017/03/14
12,254اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 2016/07/12
8,101دکمه های بسیار زیبای CSS3 تاریخ : 2013/10/26
8,951اسکریپت منوی تصویری بسیار زیبا و کاربردی تاریخ : 2013/11/1
16,577دانلود قالب چندمنظوره Salient برای وردپرس تاریخ : 2015/05/18
8,823دانلود افکت زیبا و حرفه ای CSS3 تاریخ : 2013/11/30
7,172اسکریپت منوی اجتماعی بسیار زیبا CSS3 تاریخ : 2013/11/1
7,139دانلود افکت بسیار زیبا و حرفه ای CSS3 تاریخ : 2013/12/3
8,609دانلود منو حرفه ای و جدید بسیار زیبای CSS3 تاریخ : 2013/11/23
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
indiegogo
sourceforge
profile webmaster
profile webmaster
profile
profile check
آرشیو
checker list
سئو سایت
تبلیغات