在css中，如何用图片改变表单边框的样式？

html-css07

在css中，如何用图片改变表单边框的样式？,第1张

圆角边框：border-radius: 8px（8px代表的是圆角弧度，可以根据自己的需要调整，需要注意的是这个属性的兼容性，在IE8以下的浏览器是不兼容的，也就是说，没效果）\x0d\x0a\x0d\x0a阴影：box-shadow:x y z color(比如：box-shadow: 0px 0 13px rgba(100,100,100,.7)x代表的是水平方向的偏移，y代表的是纵向偏移，z代表的是扩散，color就是阴影颜色了，表现方式有2种，1.就是#ccc[十六进制]2.rgba[或者rgb]\x0d\x0a)\x0d\x0a\x0d\x0a这两个样式都是css3样式，所以在低版本的IE上面都是不兼容的。

不如直接用HTML5+CSS3

1.确认HTML脚本文件第一行有

<!DOCTYPE html>

标记，这是浏览器识别HTML5版本的必要条件

2.如果该网页用于老式浏览器(低于IE9或Firefox4或Chrome25)，需添加shiv脚本，在head部分添加

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

 <!--[if lt IE 9]><script src="

]-->

3.创建你的元素(此处使用article标记)，标记他的style样式（如例是一个带有圆角和阴影的亮蓝色元素）

HTML 5脚本

<article>

 <h1>An Article</h1>

</article>

CSS 3脚本

article {

 background: lightblue padding: 5px border-radius: 10px margin-bottom: 10px box-shadow: 4px 4px 10px rgba(0,0,0,0.5)

}

顶端对齐？

pading-top和margin-top可以设置负数的

中间对齐？

部分浏览器支持line-heigh,另外的浏览器我忘记了

不过我习惯用pading和margin控制，不过加个over-flow：hidden就完美了