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





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

گوشه های گرد در 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
کلمات کلیدی پست :
مطالب مرتبط
13,948استایل شمارش صفحات بسیار زیبا CSS3 تاریخ : 2013/10/28
11,739شمارنده زمان باقی مانده به صورت CSS3 + جی کوئری تاریخ : 2013/11/30
12,970قالب HTML ایمیل و خبرنامه Big Mail با قابلیت صفحه ساز آنلاین تاریخ : 2017/06/22
14,790منوی سه بعدی آبشاری همراه با CSS 3 تاریخ : 2013/10/20
11,117دانلود منو حرفه ای و جدید بسیار زیبای CSS3 تاریخ : 2013/11/23
14,303اسلایدر جدید و حرفه ای CSS3 تاریخ : 2013/11/14
12,053بازی CSS3 و جاوا اسکریپت penguin jump تاریخ : 2013/11/1
8,994اسکریپت صندوق پستی بسیار زیبا CSS3 تاریخ : 2013/11/3
10,874دانلود اطلاعیه های بسیار زیبای CSS3 تاریخ : 2013/12/14
9,255دانلود پوسته شرکتی و واکنش گرای BigBang برای وردپرس تاریخ : 2014/12/29
32,236افزونه ایجاد کتاب های سه بعدی در وردپرس Real3D Flipbook نسخه 3.8.7 تاریخ : 2019/05/26
8,466افکت متنی بسیار زیبای CSS3 تاریخ : 2013/10/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file