CSS设置按钮背景图片
1、找一款编辑软件,打开后新建一个按钮(这里用DW)
网页效果图如下:
2、选择一张给按钮添加的背景图片,然后从css里设置一下:如下图所示
实现的效果网页如下:
边框属性用: border:1px solid #颜色即可;
<style type="text/css">p{
border: 1px solid #f42717
color: #f42717
}
</style>
border: 1px solid #f42717border是元素的边框,1px是粗细,solid是实线 #f42717是边框的颜色值。
color: #f42717color是设置文字颜色的。
<!doctype html><html>
<head>
<meta charset="utf-8">
<link href="main.css" type="text/css" rel="stylesheet">
<title>登陆界面</title>
</head>
<body>
<div class="login_ico">
<img src="images/login_ico.png">
</div>
<div class="login_putin">
<ul>
<li><input type="text" ></li>
<li><input type="password" ></li>
</ul>
</div>
<div class="login_btn">
<input type="submit" value="登陆">
</div>
</body>
</html>
样式 :
*{
margin:0
padding:0}
li{
list-style-type:none
margin:0
padding:0}
a{
text-decoration:none
color:#000}
/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 0
width:70%
padding: 1em 2em 1em 5.4em
-webkit-border-radius:.3em
-moz-border-radius: .3em
border: 1px solid #999
}
.login_btn{
width:300px
margin:40px auto 0 auto
}
.login_btn input{
width:100%
margin:0
padding:.5em 0
-webkit-border-radius:.3em
-moz-border-radius: .3em
border:#1263be solid 1px
background:#1b85fd
color:#FFF
font-size:17px
font-weight:bolder
letter-spacing:1em
}
.login_btn input:hover{
background:#1263be
}