必须掌握10个非常不错的CSS技巧

2020-05-12 07:51:18易采站长站整理

5、用CSS翻转图像

CSS Code复制内容到剪贴板

#content img {   
-moz-transform: scaleX(-1);   
-o-transform: scaleX(-1);   
-webkit-transform: scaleX(-1);   
transform: scaleX(-1);   
filter: FlipH;   
-ms-filter: "FlipH";   
}   
  

用上面的CSS属性你可以翻转任何图片

6、移除被点链接的点框

a {outline: none}

或者

a {outline: 0}

你一定注意到了,当你在一些博客里点击链接时,你会看到在这个链接上有点状的边框。你可以通过上面一小段的CSS移掉这些边框。

7、在CSS中使用特殊字体

你可以使用CSS来加载特殊字体,你要做的就是把这个TTF格式的字体上传到服务器上,然后使用字体规则在CSS上导入它。(PS:在之前那篇《10个必备的CSS技巧总结》中有提到怎样使用的。)

8、元素透明

CSS Code复制内容到剪贴板

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

使用透明属性,你可以让任何浏览器上的元素透明,这些属性可以在所有主流器上工作,甚至IE(PS:IE6略过?…)

9、使用CSS显示链接之后的URL

a:after{content:" (" attr(href) ") ";}

这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。

10、为手持设备定制特殊样式

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

如果你的博客不能响应或者你想在用手机浏览时有特殊的样式,你可以为你博客的手机版定制CSS。