如何用CSS实现以下文本框特效和样式

CSS文件中写入以下代码，图片自行准备。

<style> .blue_rounded {
width: 250px;
padding: 5px;
border: 0px;
background-color: lightblue;
border-radius: 20px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
}
.green_rounded {
width: 250px;
padding: 5px;
border: 0px;
background-color: lightgreen;
border-radius: 20px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 3px 3px grey;
}
.pictureFrame {
border-image: url('frame.gif') 17% ;
border-width: 20px;
border-radius: 5px;
width:250px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.dottedField {
border: 6px dotted green;
font-weight: bold;
}
.grooveField {
border: 8px groove purple;
font-weight: bold;
}
.apple1 {
background-image: url('apple2.gif');
}
.trans {
background-color: transparent;
align:center;
}
.fancy {
font-size: 36px;
font-family: SynchroLET;
color: orange;

text-transform: capitalize;
border-width: 5px 30px 10px 30px;
padding: 0px;
border-image: url(fancyborder.png) 5 30 10 30;
}
</style>

html文件中写入以下代码

<input type="text" class="green_rounded" value="Text">
<input type="text" class="blue_rounded" value="Text">
<input size="7" type="text" class="fancy" value="alert! ! !">
<input type="text" class="pictureFrame" value="Text">
<input type="text" class="dottedField" value="Text">
<input type="text" class="grooveField" value="Text">
<div style="width:315; height:25px; background-color: lightcyan; padding:10px;">
<input type="text" class="trans" value="Transparent"><input type="text" class="apple1"> </div>

转载自：http://wiki.opendarwin.org/index.php/WebKit:Sample_Code:Cool_text_fields