【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)

June 20, 2009 by SLJ | Category:HTML/CSS | No Comment Font size: AA   AA

【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)

原文：10 astonishing css hacks and technique
译文： 10个惊人的CSS hack和技术|奇亚
版权所有，转载请注明出处，谢谢

我猜想绝大多数人都知道CSS能为你做什么，但是一些惊人的技术对开发人员来说依然比较隐秘。在这篇文章中，让我们来看看10个跨浏览器的css技术，一定会强大你的设计！

1 – 跨浏览器的 inline block

<style>
      li {
          width: 200px;
          min-height: 250px;
          border: 1px solid #000;
          display: -moz-inline-stack;
          display: inline-block;
          margin: 5px;
          zoom: 1;
          *display: inline;
          _height: 250px;
      }
  </style>
    <ul>
          <li>
                  <div>
                          <h4>This is awesome</h4>
                          <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
                  </div>
          </li>
          <li>
                  <!-- etc ... -->
          </li>
  </ul>

来源: Cross browser inline-block property

2 – 禁用Safari调整文本框大小

/ * Supports: car, both, horizontal, none, vertical * /
  textarea {
         resize: none;
  }

3 – 跨浏览器圆角

.rounded{
     -moz-border-radius: 5px; /* Firefox */
     -webkit-border-radius: 5px; /* Safari */
     }

来源: Border-radius: create rounded corners with CSS!

4 – 跨浏览器min-height属性

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
   }

来源: Min-height fast hack

5 – 不改变页面布局的鼠标交替图像边框

#example-one a img, #example-one a {
      border: none;
      overflow: hidden;
      float: left;
      }
#example-one a:hover {
      border: 3px solid black;
      }
#example-one a:hover img {
      margin: -3px;
      }

来源: Image rollovers that do not change layout

6 – 跨浏览器的半透明

.transparent_class {
  	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }

来源: CSS transparency settings for all browsers

7 – 纯CSS的Lighbox: 无需Javascript!


来源: Lightbox effect in pure CSS: No javascript needed!

8 – 跨浏览器的纯CSS tooltips提示框

<style type="text/css">
  a:hover {
        background:#ffffff;
        text-decoration:none;
} /*BG color is a must for IE6*/
a.tooltip span {
      display:none;
      padding:2px 3px;
      margin-left:8px;
      width:130px;
      }
a.tooltip:hover span{
      display:inline;
      position:absolute;
      background:#ffffff;
      border:1px solid #cccccc;
      color:#6c6c6c;
      }

 </style>
     Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

来源: Easy CSS Tooltip

9 – 为选中的文本设置颜色(尽支持Firefox/Safari)

::selection {
      background: #ffb7b7; /* Safari */
      }
::-moz-selection {
      background: #ffb7b7; /* Firefox */
      }

来源: Use CSS to Override Default Text Selection Color

10 – 在你的链接旁添加一个文件类型图标

    a[href^="http://"] {
         background:transparent url(../images/external.png) center right no-repeat;
         display:inline-block;
         padding-right:15px;
         }

来源: Add File Type Icons next to your links with CSS

 

Related Posts / 相关文章



Leave a Comment:

*
*
*
*

↑ Top