آموزش CSS 3 > رابط کاربری در CSS 3 > خاصیت resize
خاصیت resize :
خاصیت resize ، تعیین می کند که آیا کاربر می تواند اندازه یک عنصر را بر روی صفحه
تغییر دهد یا خیر .
برای مثال ، اگر مقدار این خاصیت را برای یک کادر متن تنظیم نمایید ، کاربر می تواند
با عمل درگ کردن ، آن عنصر را بزرگ یا کوچک نماید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
resize: none | both| horizontal | vertical:
مثال : resize : both ;
|
|
توضیح
|
مقدار none تعیین می کند که اندازه عنصر ثابت بوده و قابل بزرگ و کوچک شدن نیست .
مقدار پیش فرض است .
|
|
مقدار both تعیین می کند که کاربر می تواند عنصر را در دو جهت عمودی و افقی بزرگ یا
کوچک نماید .
|
|
مقدار vertical تعیین می کند که کاربر می تواند عنصر را در جهت عمودی بزرگ یا کوچک
نماید .
|
|
مقدار horizontal تعیین می کند که کاربر می تواند عنصر را در جهت افقی بزرگ یا
کوچک نماید .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند
.
|
پشتیانی عادی .
|
|
پشتیانی نمی شود .
|
|
پشتیانی نمی شود .
|
|
پشتیانی عادی .
|
مثال عملی :
در مثال زیر 3 تگ div داریم که هر کدام از آنها به یک حالت از خاصیت resize تنظیم شده
اند . به بررسی خروجی ها بپردازید ( به نوع مرورگر هم دقت نمایید ) :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="border: 2px
solid maroon; padding: 10px 40px; width: 300px; resize: none; overflow: auto;">
div 1 :: none </div>
<div style="border: 2px
solid black; padding: 10px 40px; width: 300px; resize: both; overflow: auto;">
div 2 :: both </div>
<div style="border: 1px
solid red; padding: 10px 40px; width: 300px; resize: vertical ; overflow:
auto;"> div 3 :: vertical </div>
<div style="border: 2px
solid blue; padding: 10px 40px; width: 300px; resize: horizontal; overflow:
auto;"> div 4 :: horizontal </div> </body>
</html>
|
|
div 1 :: none
div 2 :: both
div 3 :: vertical
div 4 :: horizontal
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :