CSS3 contine caracteristici care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii.
border-radius
permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.<style> #id1 { width:300px; height:120px; border:2px solid blue; border-radius:28px; text-align:center; } </style> <div id="id1"> Curs CSS - marplo.net</div>
<style> #id1 { width:300px; height:120px; background-color:#bbfeda; border:2px solid blue; border-top-left-radius:20px; border-bottom-right-radius:38px; text-align:center; } </style> <div id="id1"> Curs CSS - marplo.net</div>
box-shadow
se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera.elm { box-shadow: X_offset Y_offset blur marime culoare inset; }- elm - este elementul HTML la care se aplica aceasta proprietate.
<style> #id1 { width:300px; height:120px; background-color:#bbfeda; box-shadow: 11px 11px 5px #7878da; -webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */ } </style> <div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>
border-image
se poate folosi o imagine pentru aspectul bordurii.elm { border-image: url_img slice width outset repeat; }- url_img - adresa si numele imaginii folosita pt. bordura.
- Ca sa functioneze, este necesar sa adaugati si proprietatea: border
cu valoarea "transparent" la culoare.
- border-image e recunoscut in Internet Explorer 11+.
<style> #id1 { width:200px; height:120px; border: 12px solid transparent; border-image:url('css/border_image.png') 30 30 round; } #id2 { width:200px; height:120px; border: 15px solid transparent; border-image:url('css/border_image.png') 30 30 stretch; } </style> <div id="id1"> CSS3 border-image, with round</div><br> <div id="id2"> CSS3 border-image, with stretch</div>
<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
#id { font-weight: 800; }
function someFunction() { alert("CoursesWeb.net"); } setInterval("someFunction()", 2000);
$vname = 8; echo $vname;
We have traveled in space. - Noi am calatorit (deja) in spatiu.
La niña pintaba un arco iris. - Fetita picta un curcubeu.