استایل حاشیه ای CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 20 بهمن 1399با استفاده از ویژگی استایل حاشیه ای CSS ، می توانید سبک های سفارشی را برای هر چهار مرز یک عنصر تنظیم کنید:
div.one {border-style: solid dotted dashed dotted;}
/* top border - solid, right border - dotted, bottom border-dashed, left border - dotted */
div.two {border-style: dashed dotted double;}
/* top border - dashed, right border - dotted, bottom border - double */
div.three {border-style: dotted dashed;}
/* top and bottom border - dotted, right and left borders - dashed */
div.four {border-style: dashed;}
/* all borders - dashed */بررسی استایل حاشیه ای CSS
برای ایجاد سبک های حاشیه CSS ، مثال نحوی زیر را دنبال کنید:
سبک مرزی: مقدار؛
می توانید از یک تا چهار مقدار همزمان تعریف کنید.
| Explanation | Example | Syntax |
| سبک برای هر چهار طرف یکسان است. | ;border-style: none | One value |
| اولین مقدار سبک را برای مرزهای بالا و پایین تعریف می کند. مقدار دوم سبک را برای مرزهای چپ و راست تعریف می کند. | ;border-style: none dotted | Two values |
| اولین مقدار سبک را برای حاشیه بالا تعریف می کند. مقدار دوم سبک را برای مرزهای چپ و راست تعریف می کند. مقدار سوم سبک را برای حاشیه پایین تعریف می کند. | ;border-style: none dotted dashed | Three values |
| اولین مقدار سبک را برای حاشیه بالا تعریف می کند. مقدار دوم سبک را برای حاشیه سمت راست تعریف می کند. مقدار سوم سبک را برای حاشیه پایین تعریف می کند. مقدار چهارم سبک را برای مرز چپ تعریف می کند. | ;border-style: none dotted dashed double | Four values |
تمام مقادیر ممکن برای سبکهای حاشیه CSS را که در بخش زیر تعریف شده اند ، مشاهده کنید.
ارزش های ویژگی
| Description | Value |
| مقدار پیش فرض هیچ حاشیه ای نمایش داده نمی شود | none |
| هیچ حاشیه ای نمایش داده نمی شود | hidden |
| حاشیه نقاط گرد نمایش داده می شود | dotted |
| حاشیه ای از خط تیره کوتاه نمایش داده می شود | dashed |
| یک مرز جامد واحد نمایش داده می شود | solid |
| یک مرز دوتایی نمایش داده می شود | double |
| یک مرز منحنی رو به داخل نمایش داده می شود | groove |
| یک مرز منحنی به سمت خارج نمایش داده می شود | ridge |
| حاشیه تعبیه شده نمایش داده می شود | inset |
| یک حاشیه برجسته نمایش داده می شود | outset |
پشتیبانی از مرورگر
این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.
در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟