请问css 如何用图片做表单的边框?

表述不太清楚,大概就是图上这种效果,图片拼成的边框(有四个角和线的图)输入文字后,边框大小会随之变化,不会溢出

先谢了

不如直接用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);
}

温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-07-24
两种效果 一种是把图片做成大的背景
但是这样有局限性 因为这样它不会根据页面的变化而变化了
另一种方法是我推荐的方法
把底部圆角那儿切出来叫top.jpg
底部叫foot.jpg
中间的叫bg.jpg
<div style=" background:url(这里是bg.jpg) repeat-y left top">
<div>这里放head.jpg图片</div>
<div>这里就是你想要写的内容随便放什么都可以的</div>
<div>这里放foot.jpg图片</div>
</div>
这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的
而且会根据内容的大小而变化追问

谢谢 我试了下,这样确实很方便简单。不好意思还想问一下怎么让文字在框内呢,因为这个边框比较小,居中的话会跑到外面去orz

追答


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

这样的你试一下..

追问

谢谢,已经对齐了! 但是横向溢出了........     

追答

我晕 你一点css也不会吗?
你在最外面得有一个大的div控制着它的大小呀
在最外层写一个大的div 控制这个div的宽和图片的宽是一样宽的..我服了.

ps:要不然用这种效果吧..

.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-left:1px solid #ccc;border-right:1px solid #ccc;}
.xb1 {margin:0 5px;background:#ccc;}
.xb2 {margin:0 3px;border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px;margin:0 1px;}
.xboxcon {margin:0px;display:block;border:0 solid #ccc;border-width:0 1px; padding:10px;}

这里随便写什么都可以的

你看下这样的能理解了不?

追问

是不会,才开始学,练习了一下

追答

呵呵 ..慢慢来 慢慢来就会了 不过css这一块你得加强一下。。这种定义div的宽是最基本的
以上两种方法 你看着哪个比较好理解你就用哪一个吧..

本回答被提问者采纳
第2个回答  2013-07-24
百度一下css3:圆角边框就可