CSS penjuru bulat bekas blok generator_CSS/HTML

Sudah tentu anda masih menggunakan gambar, tetapi anda boleh menjana gambar dengan warna yang anda mahukan.

http://www.neuroticweb.com/recursos/css-rounded-box/

Simpan imej yang dijana di atas dan kod berikut dalam folder yang sama:

<p> </p> <title>Bekas blok bulat CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <gaya> .rbroundbox { latar belakang: url(nt.gif) ulang } .rbtop div { latar belakang: url(tl.gif) tiada ulangan kiri atas } .rbtop { latar belakang: url(tr.gif) tiada ulangan atas kanan } .rbbot div { latar belakang: url(bl.gif) tiada ulangan kiri bawah } .rbbot { latar belakang: url(br.gif) tiada ulangan bawah kanan; }<style> .rbroundbox { background: url(nt.gif) repeat; } .rbtop div { background: url(tl.gif) no-repeat top left; } .rbtop { background: url(tr.gif) no-repeat top right; } .rbbot div { background: url(bl.gif) no-repeat bottom left; } .rbbot { background: url(br.gif) no-repeat bottom right; } <P>/* height and width stuff, width not really nessisary. */ .rbtop div, .rbtop, .rbbot div, .rbbot { width: 100%; height: 7px; font-size: 1px; } .rbcontent { margin: 0 7px; } .rbroundbox { width: 50%; margin: 1em auto; } </style> /* barang tinggi dan lebar, lebar tidak semestinya */. .rbtop div, .rbtop, .rbbot div, .rbbot { lebar: 100%; ketinggian: 7px; saiz fon: 1px; } .rbcontent { margin: 0 7px } .rbroundbox { lebar: 50%; <p> </p> <div class="rbroundbox"> <div class="rbtop"> <div></div> </div> <div class="rbcontent"> <p> </p>Lorem ipsum dolor duduk amet, consectetuer adipiscing elit ornare ultricies libero fringilla, eros dan dapibus fermentum, tellus tellus auctor erat, vitae porta magna libero sed libero. Aliquam aliquam. Maecenas vestibulum.</div> <div class="rbbot"> <div></div> </div> </div> <p> </p></gaya>