css 如何用图片改变表单边框的样式(圆角边框,有阴影)

2025-01-07 16:34:27

推荐回答（3个）

回答1：

两种效果一种是把图片做成大的背景
但是这样有局限性因为这样它不会根据页面的变化而变化了
另一种方法是我推荐的方法
把底部圆角那儿切出来叫top.jpg
底部叫foot.jpg
中间的叫bg.jpg

这里放head.jpg图片

这里就是你想要写的内容随便放什么都可以的

这里放foot.jpg图片

这样的效果你看下吧肯定是最简单最方便实现你现在这种效果的
而且会根据内容的大小而变化。
另一种
文本框用input，
.txtnput{float: left;width:126px; height:27px;background:url(图片路劲);border:none;}
高度和宽度是你效果图中你需要的那种文本框的大小，背景图片也是你需要的那种框。
按钮也是一样的实现。

回答2：

文本框用input，
.txtnput{float: left;width:126px; height:27px;background:url(图片路劲);border:none;}
高度和宽度是你效果图中你需要的那种文本框的大小，背景图片也是你需要的那种框。
按钮也是一样的实现。

回答3：

圆角边框：border-radius: 8px（8px代表的是圆角弧度，可以根据自己的需要调整，需要注意的是这个属性的兼容性，在IE8以下的浏览器是不兼容的，也就是说，没效果）;

阴影：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]
);

这两个样式都是css3样式，所以在低版本的IE上面都是不兼容的。