新聞中心
html文本框圓角邊框css樣式怎么寫
html文本框圓角邊框css樣式可以通過改變border-radius屬性的值進(jìn)行添加。border-radius值的單位可以使用“px”,也可以使用“%”,單位不同效果也不同。具體代碼如下:
創(chuàng)新互聯(lián)建站自成立以來,一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計、成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團隊及專業(yè)的網(wǎng)站設(shè)計師團隊。
!doctype html
html
head
meta charset="UTF-8"
titleDocument/title
/head
body
textarea style="border-radius: 50px; width: 100px; height: 100px;" /textarea
/body
/html
運行效果如圖:
擴展資料:
CSS具有以下特點:
1、豐富的樣式定義:
CSS提供了豐富的文檔樣式外觀,以及設(shè)置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內(nèi)容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2、易于使用和修改:
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個專門的CSS文件中,以供HTML頁面引用??傊?,CSS樣式表可以將所有的樣式聲明統(tǒng)一存放,進(jìn)行統(tǒng)一管理。
3、多頁面應(yīng)用:
CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。
參考資料百度百科——css
幾種漂亮的文本框樣式
只有下劃線的文本框:
input style="border:0;border-bottom:1 solid black;background:;"
軟件序列號式的輸入框:
script for="T" event="onkeyup"
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
/script
input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T7" size="5" maxlength="3"
軟件序列號式的輸入框(完整版):
script for="T" event="onkeyup"if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();/script
script for="T" event="onfocus"select();/script
script for="Submit" event="onclick"
var sn=new Array();
for(i=0;iT.length;i++)
sn=T.value;
alert(sn.join("—"));
/script
input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"
input type="submit" name="Submit"
輸入框景背景透明:
input style="background:transparent;border:1px solid #ffffff"
鼠標(biāo)劃過輸入框,輸入框背景色變色:
INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"
輸入字時輸入框邊框閃爍(邊框為小方型):
Script Language="JavaScript"
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
/Script
input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);"
輸入字時輸入框邊框閃爍(邊框為虛線):
style
#oText{border:1px dotted #ff0000;ryo:expression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
/style
input type="text" id="oText"
自動橫向廷伸的輸入框:
input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk"
自動向下廷伸的文本框:
textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight80) this.style.posHeight=this.scrollHeight+5"輸入幾個回車試試/textarea
html中如何用css讓文本框有立體的感覺
style type="text/css"
INPUT.smallInput
{
BACKGROUND-COLOR:#FFFFFF;
COLOR:#000000;
FONT-SIZE:9pt;
FONT-WEIGHT:Normal;
TEXT-DECORATION:None;
FOTN-FAMILY:宋體,verdana,Arial, Helvetica;
TEXT-ALIGN:Left;
BORDER-TOP:3 Hidden #808080;
BORDER-LEFT:3 Hidden #808080;
BORDER-RIGHT:3 Hidden #FFFFFF;
BORDER-BOTTOM:3 Hidden #FFFFFF;
CURSOR:Text;
}
/style
這個css樣式是 --單行文本框設(shè)置代碼--,你可以修改一下做出自己想要的效果 ,然后你的文本框調(diào)用這個樣式就可以了
本文名稱:好看的css文本框樣式,css文本樣式標(biāo)簽都有哪些
網(wǎng)頁URL:http://www.dlmjj.cn/article/dsihcpd.html