قرار دادن یک عکس به جای Border
درCSS این قابلیت وجود دارد که از عکس به جای Border استفاده کرد
این پراپرتی در CSS3 به نام image-border وجود دارد که برخی از مروزگرها هنوز این استاندارد جدید را ساپورت نمی‌کنند و برای این کار از سینتکس متفاوتی میتوان استفاده کرد ، البته به غیر IE :(
پارامترهای این پرارتی عبارتند از:
- url
آدرس عکس مورد نظر
- slice
- عدد اول برای برش قسمت بالا به صورت افقی
- عدد دوم برای برش قسمت راست به صورت عمودی
- عدد سوم برای برش قسمت پایین به صورت افقی
- عدد چهارم برای برش سمت چپ به صورت عمودی
- strech
نکته‌ای که باید در نظر بگیرید Transparent بودن عکس برای قسمت داخلی عکس می‌باشد (برای درج مطالب)
مثال زیر نمونه‌ای از استفاده از این ویژگی و سینتکس آن در مرورگرهای مختلف:
[HTML]<html>
<head>
<style type="text/css">
/*
example for image border
*/
.box {
width: 400px;
height: 400px;
border-width: 100px 100px;
-moz-border-image:url(border.png)100 100 round; /* Mozila FireFox */
-webkit-border-image:url(border.png) 100 100 round; /* Webkit browser (Saffari & Chrome)*/
-o-border-image:url(border.png) 100 100 round; /* Opera */
border-image: url(border.png) 100 100 round; /* CSS3 - Suport Browsers */
}
</style>
</head>
<body>
<div class="box"><img src="Baby.jpg" /><h3>Example for use image border</h3></div>
</body>
</html>[/HTML]
فایل‌های ضمیمه را هم از لینک زیر دریافت کنید:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
