论坛首页 Web前端技术论坛

DIV不用图片做可变可到处用的圆角

浏览 13100 次
精华帖 (0) :: 良好帖 (16) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-03-15  
xieye 写道
灰常神奇!
ff下第二个图片左右竖线没显示出来,但已经很不错了!




.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
改成下面的,写处详细一点,FF就能显示了边框了。
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/


  • 大小: 15.6 KB
0 请登录后投票
   发表时间:2010-03-16  
我觉得这些东西,参照下ext的圆角生产方式就可以了,没必要去自己生产
0 请登录后投票
   发表时间:2011-01-26  
真的很不错哦
0 请登录后投票
   发表时间:2011-02-12  
把你的这个好东西 做了个 封装 呵呵 就一个 js 文件 不依赖 css文件 嘻嘻
http://vb2005xu.iteye.com/blog/904883
0 请登录后投票
   发表时间:2011-02-13  
在IE8,IE9,FF下都试过了,很好很强大。
0 请登录后投票
   发表时间:2011-02-14  
LZ能说说原理是怎么样的吗?
0 请登录后投票
   发表时间:2011-02-14  
以前在Google 的自定义首页上看到过 用 b 一点一点去画
但是 个人还是不叫喜欢 CSS 3 的圆角 毕竟简单, 虽然万恶的IE不支持
0 请登录后投票
   发表时间:2011-02-14  
呵呵 很好玩哦 很强大



(function(){var d={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#B2D0EA",margin:"0 3px",clear:"both"};var c={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 1px",clear:"both","border-right":"2px solid #B2D0EA","border-left":"2px solid #B2D0EA"};var a={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 1px",clear:"both","border-right":"1px solid #B2D0EA","border-left":"1px solid #B2D0EA"};var e={"font-size":"12px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 0px",clear:"both","border-right":"1px solid #B2D0EA","border-left":"1px solid #B2D0EA"};var b={background:"#EDF7FF",margin:"0 2px",padding:"5px"};var f={background:"#FFFFFF",margin:"0 2px",padding:"5px"};Moogens.UI.RoundRect=function(s){var t=Object.extend({container:null,style:null},s||{});var q=$C("div");q.className="roundrect";if(t.width){q.style.width=t.width}var m=new Moogens.Dom.Node($C("b"));q.appendChild(m.css(d).getElement());var k=new Moogens.Dom.Node($C("b"));q.appendChild(k.css(c).getElement());var j=new Moogens.Dom.Node($C("b"));q.appendChild(j.css(a).getElement());var l=$C("div");var n=new Moogens.Dom.Node(l);n.css(e).html("<div class='bt'></div><div class='bb'></div>");var h=new Moogens.Dom.Node(Moogens.Dom.get("div.bt",l)[0]);h.css(b);var i=new Moogens.Dom.Node(Moogens.Dom.get("div.bb",l)[0]);i.css(f);q.appendChild(n.getElement());var o=new Moogens.Dom.Node($C("b"));q.appendChild(o.css(a).getElement());var p=new Moogens.Dom.Node($C("b"));q.appendChild(p.css(c).getElement());var r=new Moogens.Dom.Node($C("b"));q.appendChild(r.css(d).getElement());this.get=function(){return q};this.setTitle=function(u){t.title=u&&typeof u=="string"?u:"title must string";h.text(t.title)};this.setContent=function(u){t.content=u&&typeof u=="string"?u:"content must string";i.html(t.content)};this.customStyle=function(w){var v=Object.extend({bar:"#B8E7B3",border:"#E7F9E3"},w);var y={background:v.bar};var x={background:v.border,"border-left-color":v.bar,"border-right-color":v.bar};var u={background:v.border};m.css(y);k.css(x);j.css(x);n.css(x);h.css(u);o.css(x);p.css(x);r.css(y)};if(t.style){this.customStyle(t.style)}this.setTitle(t.title);this.setContent(t.content);if(t.container){var g=Moogens.Dom.get(t.container)[0];if(g&&g.nodeType==1){t.container=g;g.appendChild(q)}}}})();
0 请登录后投票
   发表时间:2011-02-15  
很好用的,之前我都是用图片来完成的 !谢
0 请登录后投票
   发表时间:2011-02-15  
可以了,期待以后用html5!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics