FireFox下实现圆角border-radius (css3.0 新增)

  • 2008-07-16
  • 分类：XHTML+CSS
  • 作者：银子
  • 443 次查看

css3.0中新增属性: border-radius

用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox和Safari3支持该属性。

代码:


-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;

分别代表上左,上右,下左,下右四个角.

如果要在safari3中支持.就将前面的-moz改为-webkit

P.S.wordpress2.5以上版本的后台登录页面就用到了此属性.

Tags : , ,
0 条评论

Input file 文件选择框美化 支持Firefox

闲来无事写了一个.也许用得上

在FF2,IE7,IE6下测试通过

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="wuleying" />
  6. <!--<script type="text/javascript" src="ajax.js"></script>-->
  7. <title>测试上传文件</title>
  8. <style type="text/css">
  9. * {font-size:12px;margin:0;}
  10. body {background:#fff;}
  11. form {margin:12px;}
  12. input.file{
  13.     vertical-align:middle;
  14.     position:relative;
  15.     left:68px;
  16.     *left:-218px;
  17.     filter:alpha(opacity=0);
  18.     opacity:0;
  19.     z-index:1;
  20.     *width:223px;
  21.     display:none;
  22. }
  23. form input.viewfile {
  24.     z-index:99;
  25.     border:1px solid #ccc;
  26.     padding:2px;
  27.     width:150px;
  28.     vertical-align:middle;
  29.     color:#999;
  30. }
  31. form p span {
  32.     float:left;
  33. }
  34. form label.bottom {
  35.     border:1px solid #38597a;
  36.     background:#4e7ba9;
  37.     color:#fff;
  38.     height:19px;
  39.     line-height:19px;
  40.     display:block;
  41.     width:60px;
  42.     text-align:center;
  43.     cursor:pointer;
  44.     float:left;
  45.     position:relative;
  46.     *top:1px;
  47. }
  48. form input.submit {
  49.     border:0;
  50.     background:#380;
  51.     width:70px;
  52.     height:22px;
  53.     line-height:22px;
  54.     color:#fff;
  55.     cursor:pointer;
  56. }
  57. p.clear {
  58.     clear:left;
  59.     margin-top:12px;
  60. }
  61. p.filep {
  62.     height:25px;
  63. }
  64. p.clear input {
  65.     float:left;
  66.     margin-right:6px;
  67. }
  68. #error {
  69.     padding-top:5px;
  70.     color:#f00;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
  76. <input type="hidden" name="max_file_size" value="2097152" />
  77. <input type="hidden" name="do" value="upload" />
  78. <p class="filep">
  79.     <span>
  80.         <label for="viewfile">上传文件：</label>
  81.         <input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
  82.     </span>
  83.     <label for="upload" class="bottom" onmouseover="document.getElementById('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" />
  84. </p>
  85. <p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
  86. </form>
  87. </body>
  88. </html>
Tags : , , , , ,
0 条评论

仿WINODWS警告提示Firefox广告

  • 2008-03-3
  • 分类：JavaScript
  • 作者：银子
  • 360 次查看

不知道效果如何,先挂在自己的表情站上试试,毕竟google广告里最有价值的还是Firefox的广告推荐了

实现代码如下：

先在 < body > 后加上这么一段

  1. <div id="firefox">
  2. <a href="/firefox/" target="_new">还在用过时的IE浏览器？远离网络病毒,木马,恶意软件的入侵攻击,强烈建议下载安装【最快.最安全】的浏览器：火狐Firefox2.0</a>
  3. <img src="close.gif" id="foxclose" />
  4. </div>
  5. <script type="text/javascript" src="firefox.js"></script>

CSS部分:

  1. #firefox {
  2.     height:25px;
  3.     width:100%;
  4.     background:url(warning.gif) no-repeat 8px 3px #ffb;
  5.     border-bottom:1px solid #ffdb4d;
  6.     line-height:25px;
  7.     display:none;
  8. }
  9.  
  10. #firefox a {
  11.     color:#52271d;
  12.     float:left;
  13.     margin-left:170px;
  14. }
  15.  
  16. #firefox img {
  17.     dispaly:block;
  18.     float:right;
  19.     margin:7px 6px 0 0;
  20.     cursor:pointer;
  21. }

全文阅读 »

Tags : , ,
2 条评论

Tor+Torbutton+FireFox 匿名代理最好的组合

  • 2007-11-23
  • 分类：Other
  • 作者：银子
  • 793 次查看

Tor+Torbutton+FireFox 匿名代理最好的组合

Tor下载地址:
http://www.torproject.org/download.html.zh-cn

Torbutton下载地址:
https://addons.mozilla.org/en-US/firefox/addon/2275

FF下载地址:
http://www.mozilla.com/en-US/

好处慢慢体会吧

不要做坏事咯=。=

Tags : , , , ,
1 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志