修远兮 - 博客园

2011年11月29日

小例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>transform</title>
<style type="text/css">
    *{ margin:0; padding:0;}
    li{ list-style-type:none;}
    .nav{ width:300px; margin:260px auto;}
    .nav li{ position:relative; height:42px; line-height:42px; border-bottom:1px solid #FED1F9;}
    .nav li i{ position:absolute; left:10px; top:12px; display:inline-block; width:18px; height:18px; background:#C30;}
    .nav li b{ margin-left:40px;}
    .nav li a{ display:block; width:100%; height:42px; font-size:14px; color:#333; text-decoration:none;}
    .nav a:hover{ position:absolute; z-index:1; top:-1px; left:-1px; border:1px solid #F76296; background:#FDE6FF;}
    .nav a:hover i{-webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg); transform:rotate(15deg);}
</style>
</head>

<body>
<ul class="nav">
    <li><a href="http://music.baidu.com/" target="_blank"><i></i><b>伤不起—王麟</b></a></li>
    <li><a href="http://music.baidu.com/" target="_blank"><i></i><b>依然爱你—王力宏</b></a></li>
    <li><a href="http://music.baidu.com/" target="_blank"><i></i><b>没那么简单—黄小琥</b></a></li>
</ul>
</body>
</html>

transform其他用法：

posted @ 2011-11-29 22:40 修远兮阅读(35) 评论(0) 编辑

2011年11月22日

IE6、7、8实现盒阴影

一直以为在IE6、7、8下面实现阴影只能用背景模拟呢，原来用滤镜也可以在IE在写出阴影来，记录下。

/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

第一，滤镜里的颜色属性必须写完整，不能用缩写。比如#000000不能写成#000；

第二，滤镜的阴影是计算在宽高内的。比如我的盒子宽高都是100px，当我设置阴影的宽度为4px的时候，实际我盒子的宽度和高度就都变成了104px。

posted @ 2011-11-22 10:43 修远兮阅读(19) 评论(0) 编辑

2011年11月3日

背景透明的CSS三角代码（兼容）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>背景透明的CSS三角代码</title>
<style type="text/css">
body{background:#090;}
.triangle
{              
    border-color: #b1b3b1 transparent transparent; 
    border-style: solid; 
    border-width: 45px 45px 0 45px;/* 最少要有二个值，0代表没有尖角 */
    width: 0; 
    height: 0; 
    /* ie6 height */  
    font-size: 0;  
    line-height: 0;  
    /* ie6 transparent */  
    _border-top-color: #b1b3b1;  
    _border-left-color: #dddddd;
    _border-right-color: #dddddd; 
    _border-bottom-color: #dddddd;   
    _filter: chroma( color = #dddddd);  
}
</style>
</head>
<body>
    <div class="triangle"></div> 
</body>
</html>

posted @ 2011-11-03 00:47 修远兮阅读(57) 评论(0) 编辑

仅列出标题

公告