css 如何用图片改变表单边框的样式(圆角边框,有阴影)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 如何用图片改变表单边框的样式(圆角边框,有阴影)相关的知识,希望对你有一定的参考价值。
我想用图片做背景 不希望用js 另外表单中的输入框也是要用图中的那种边框的
就是希望有点立体感....
如果各位高手方便的话 把代码写出来给我好吗 要写的东西其实不多 附上代码可以加分到50分...
但是这样有局限性 因为这样它不会根据页面的变化而变化了
另一种方法是我推荐的方法
把底部圆角那儿切出来叫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>
这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的
而且会根据内容的大小而变化。
另一种
文本框用input,<input type="text" class="txtnput" value=""/>
.txtnputfloat: left;width:126px; height:27px;background:url(图片路劲);border:none;
高度和宽度是你效果图中你需要的那种文本框的大小,背景图片也是你需要的那种框。
按钮也是一样的实现。 参考技术A 文本框用input,<input type="text" class="txtnput" value=""/>
.txtnputfloat: left;width:126px; height:27px;background:url(图片路劲);border:none;
高度和宽度是你效果图中你需要的那种文本框的大小,背景图片也是你需要的那种框。
按钮也是一样的实现。本回答被提问者采纳 参考技术B 圆角边框: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上面都是不兼容的。
如何用css使边框颜色渐变
一、CSS3 中的边框颜色 这里是一个10px宽的标准边框和边框颜色: #borderColor border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; 二、有圆角的边框颜色 #borderColorCorner border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; 参考技术A background-color:#a0a #909 #808 #707 #606 #505 #404 #303;background -color 属性的参数很简单,可以是任意合法的颜色值或颜色值列表,当background -color只设置了一个颜色时,那么就是单色的。如果设置了n中颜色而边框宽度也为n的话那么每一个像素显示一种颜色,如果边框宽度值大于颜色数值时,最后一种颜色用于显示剩下的宽度。 参考技术B 浏览器兼容性不好,注意使用
以上是关于css 如何用图片改变表单边框的样式(圆角边框,有阴影)的主要内容,如果未能解决你的问题,请参考以下文章