首頁 > web前端 > css教學 > css input怎麼去掉邊框

css input怎麼去掉邊框

青灯夜游
發布: 2023-01-05 16:13:04
原創
11533 人瀏覽過

css去掉input邊框的方法:1.使用「border:none;」語句定義無邊框樣式來去掉;2、使用「border:0;」語句設定邊框寬度為0來去掉;3、使用“border:transparent;”語句設定透明邊框來去除。

css input怎麼去掉邊框

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

方法1:使用border:none;

border屬性設定所有的邊框屬性,當值為none時,表示對標籤元素不設定邊框屬性或取消邊框屬性,定義無邊框樣式。

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			input{
				background-color: papayawhip;
			}
			#qd{
				border:none;
			}
		</style>
	</head>
	<body>
		<input type="text" value="测试输入框"/><br /><br />
		<input id="qd" type="text" value="测试输入框"/>
	</body>

</html>
登入後複製

效果圖:

css input怎麼去掉邊框

#方法1:使用border:0;

透過將邊框的寬度設為0來去除

#qd{
	border:0;
}
登入後複製

效果圖:

css input怎麼去掉邊框

方法3:使用border :transparent;

透過將邊框的樣式設為透明色來去除

#qd{
	border:transparent;
}
登入後複製

效果圖:

css input怎麼去掉邊框

# #(學習影片分享:

css影片教學

以上是css input怎麼去掉邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板