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





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

دستور Border radius در CSS3

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

در این قسمت از سری آموزش های دوران طراحی وب به موضوع زیبا سازی تگ های درون صفحه می رسیم . در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم .دستور border radius که در ورژن 3 از نسخه زبان css معرفی شد برای گرد کردن اشیاء درون صفحه استفاده می شود البته این دستور از مرورگر های IE ورژن 9 به بالا و اکثر مرورگر های دیگر پشتیبانی می شود . در ادامه نحوه استفاده از این دستور را بررسی می کنیم .

دستور Border radius در CSS3

دستور Border radius در CSS3

نحوه استفاده از این دستور در زبان CSS به صورت زیر می باشد :

.selector {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
}

 

دستور بالا تگی با خاصیت کلاس selector را گوشه های این المنت رو به میزان 10 پیکسل گرد خواهد کرد . توجه داشته باشید که در خط های بعدی دستور border radius دستوراتی برای اعمال این دستور در مرورگر های مختلف می باشد که اگر حتما می خواهید صفحه شما در تمامی مرورگر ها به یک شکل باشند باید از این دستور ها استفاده کنید .

توجه داشته باشید که مقدار دستور border radius می تواند به صورت واحد های مختلف زبان css مانند em , percent , px,… باشد

تغییر جز به جزء گوشه ها

جهت تغییر هر یک از گوشه های المنت در این دستور به صورت زیر تنظیم می شود :

دستور Border radius در CSS3

.selector {
border-radius:1 2 3 4;
}

در دستور بالا با توجه به شکل ترتیب گرد کردن گوشه اشیاء مشخص شده است که در واقع عدد هایی که در دستور border radius به کار رفته اند دقیقا باید مطابق شکل تنظیم شوند مانند دستور زیر :

.selector {
border-radius:10px 5px 10px 5px;
}

 

نکته : برای گرد کردن شئ و تبدیل آن به یک دایره باید میزان border radius را برابر %100 قرار دهیم

 

به این ترتیب به پایان این قسمت از سری آموزش های دوران طراحی وب رسیدیم , امیدوارم از این آموزش لذت کافی رو ببرید ! در ضمن نکته ای دیگر این که نظرات مقداری کم رنگ شده امیدوارم با دیدگاه های خوبتون پر رنگ تر بشه

موفق و پیروز و سربلند باشید.

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

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

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

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

دانلود

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

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 CSS / HTML , آموزش طراحی
لینک کوتاه مطلب : https://www.20script.ir/?p=1240
کلمات کلیدی پست :
مطالب مرتبط
10,251آیکون های بسیار زیبای CSS3 تاریخ : 2013/10/26
12,092گوشه های گرد در CSS3،بررسی Border-radius تاریخ : 2013/10/19
12,033بازی CSS3 و جاوا اسکریپت penguin jump تاریخ : 2013/11/1
19,505آموزش طراحی منو افقی برای وردپرس تاریخ : 2013/11/27
9,411صفحه بندی تیره به صورت CSS3 تاریخ : 2014/04/1
38,867افزونه Dropdown Menu Widget برای ساخت منو کشویی وردپرس تاریخ : 2014/06/7
11,759دانلود افکت زیبا و حرفه ای CSS3 تاریخ : 2013/11/30
18,534قالب HTML ایمیل و خبرنامه Material با قابلیت صفحه ساز آنلاین تاریخ : 2017/04/27
24,563افزونه وردپرس پک افزودنی های ویژوال کامپوسر تاریخ : 2015/04/4
12,199قالب HTML ایمیل و خبرنامه Retail Mail با قابلیت صفحه ساز آنلاین تاریخ : 2017/06/22
19,185اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 2014/11/24
14,086دانلود کد کیبورد بسیار کاربردی فول CSS3 تاریخ : 2013/11/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file