إطارات الصور باستخدام حدود CSS3

مدهش — Sat, 07 Jan 2012 21:25:23 +0000

CSS3 تجعل من الممكن عمل حدود أو اطار علي الصور برمجيا وتعطي تأثير الحدود المطلوبه وتعمل علي كل المتصفحات

هذه الوظيفة ليست وصفا مفصلا حول الحدود ولكنها توضح كيفية استخدام هذه الخاصيه لإضافة إطارات للصور وخلق صوره للإطار الذي ترغب بإستخدامه

والأن في هذه المسأله ينبغي علينا أن نقوم بتحديد الإطار المراد تعيينه:

CSS:

[html] imageborder{
border-width: 20px;
-moz-border-image: url(frame.gif) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(frame.gif) 20 stretch; /*Webkit version*/
-o-border-image: url(frame.gif) 20 stretch; /*Opera version*/
-ms-border-image: url(frame.gif) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(frame.gif) 20 stretch; /*Standard version*/
}
[/html]

Markup:

[html]

Content text here…

[/html]

وهذا هو ناتج التطبيق

المثال الثاني:

CSS:

[html] .imageborder2{
border-width: 25px 30px;
-moz-border-image: url(frame2.png) 25 30 stretch;
-webkit-border-image: url(frame2.png) 25 30 stretch;
-o-border-image: url(frame2.png) 25 30 stretch;
-ms-border-image: url(frame2.png) 25 30 stretch;
border-image: url(frame2.png) 25 30 stretch;
}.
[/html]

Markup:

[html]

[/html]

فواصل » اطارات،صور،سي،اس،اس،ثري،css3

إطارات الصور باستخدام حدود CSS3