10个非常实用的CSS hack技术

互联网
秋天是个瓜果飘喷鼻香、带着丰产喜悦的时令；秋天是个充溢童趣的时令；孩子们可以去捉蛐蛐、摘果子，还可以去金黄的原野放鹞子、去树林里捡落叶；当把收罗的落叶拼成一幅幅图案时，就会是世上最美丽的丹青。

好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧

1 – 跨浏览器的inline-block

CSS Code复制内容到剪贴板
  1. <style>
  2. li{
  3. width:200px;
  4. min-height:250px;
  5. border:1pxsolid#000;
  6. display:-moz-inline-stack;
  7. display:inline-block;
  8. margin:5px;
  9. zoom:1;
  10. *display:inline;
  11. _height:250px;
  12. }
  13. </style>
  14. <ul>
  15. <li>
  16. <div>
  17. <h4>Thisisawesome</h4>
  18. <imgsrc="/wp-content/uploads/2009/06/0933264tq.jpg"alt="lobster"width="75"height="75"/>
  19. </div>
  20. </li>
  21. <li>
  22. <!--etc...-->
  23. </li>
  24. </ul>

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

CSS Code复制内容到剪贴板
  1. /*支持:car,both,horizontal,none,vertical*/
  2. textarea{
  3. resize:none;
  4. }

3 – 跨浏览器圆角

CSS Code复制内容到剪贴板
  1. .rounded{
  2. -moz-border-radius:5px;/*Firefox*/
  3. -webkit-border-radius:5px;/*Safari*/
  4. border-radius:5px;
  5. }

4 – 跨浏览器min-height 属性

CSS Code复制内容到剪贴板
  1. selector{
  2. min-height:500px;
  3. height:auto!important;
  4. height:500px;
  5. }

5 – 不会改变布局的图片滚动边框

CSS Code复制内容到剪贴板
  1. #example-oneaimg,#example-onea{
  2. border:none;
  3. overflow:hidden;
  4. float:left;
  5. }
  6. #example-onea:hover{
  7. border:3pxsolidblack;
  8. }
  9. #example-onea:hoverimg{
  10. margin:-3px;
  11. }

6 – 跨浏览器的透明

CSS Code复制内容到剪贴板
  1. .transparent_class{
  2. filter:alpha(opacity=50);
  3. -moz-opacity:0.5;/**Firefox3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效***/
  4. -khtml-opacity:0.5;
  5. opacity:0.5;
  6. }

7 – 纯CSS的Lighbox效果:无需Javascript ！

8 – 跨浏览器的纯CSS提示

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. a:hover{
  3. background:#ffffff;
  4. text-decoration:none;}/*****背景色对IE6来说是必须的****/
  6. a.tooltipspan{
  7. display:none;
  8. padding:2px3px;
  9. margin-left:8px;
  10. width:130px;
  11. }
  13. a.tooltip:hoverspan{
  14. display:inline;
  15. position:absolute;
  16. background:#ffffff;
  17. border:1pxsolid#cccccc;
  18. color:#6c6c6c;
  19. }
  20. </style>
  21. Easy<aclass="tooltip"rel="nofollow noopener noreferrer" href="#">Tooltip<span>ThisisthecrazylittleEasyTooltipText.</span></a>.

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

CSS Code复制内容到剪贴板
  1. ::selection{
  2. background:#ffb7b7;/*Safari*/
  3. }
  5. ::-moz-selection{
  6. background:#ffb7b7;/*Firefox*/
  7. }

10 – 在链接后面添加一个文件类型图标

CSS Code复制内容到剪贴板
  1. a[href^="http://"]{
  2. background:transparenturl(../images/external.png)centerrightrightno-repeat;
  3. display:inline-block;
  4. padding-right:15px;
  5. }

以上就是10个非常实用的CSS hack技术。有时，你不得不相信，有些人注定只能停留在你的心中，却不克不及留在你的生活中。更多关于10个非常实用的CSS hack技术请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题