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>
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.