如何用css控制按钮的样式，能实现在按钮上任意书写文字的效果更好_IT百科

#bo1

{margin-top:1pxborder-left:1px

solid

#555555border-right:1px

solid

#555555border-top:1px

solid

#555555line-height:26pxbackground-color:#999999color:#ff0000font-size:18pxfont-family:隶书}

用border

及solid设置过框。再用background-color设置背景，同时用color设置字体颜色。font-family设置字体。用margin定位好，就可以了

如果是BUTTON标签的话：<button>文字</button>

如果是input标签的话：<input type="button" value="文字">

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<style>

#abox{

position:relative/*容器相对定位*/

width:300px/*宽度300px*/

margin:0 auto/*横向居中*/

}

#abox img{

width:300px/*宽度300px*/

}

span{

position:absolute/*文字容器绝对定位*/

display:block/*span转为块元素*/

width:100%/*宽度相对于父容器100%*/

text-align:center/*文字居中*/

top:0/*距离父容器顶部0*/

left:0/*距离父容器左侧0*/

color:red/*文字颜色红色*/

font-size:18px/*文字大小既文字高度18px*/

font-weight:bold/*文字加粗*/

}

</style>

</head>

<body>

<span>我要显示文字</span>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何用css控制按钮的样式，能实现在按钮上任意书写文字的效果更好