注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

样式小技巧  

2012-03-22 18:54:14|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、透明度filter:alpha(opacity=80);-moz-opacity:0.8;

2、最小高度min-height:76px; height:auto !important; height:76px;

3、字母字符打散word-break:break-all;word-wrap:break-word;

4、自定义滚动条scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-shadow-color:#6C6864;
scrollbar-3dlight-color:#6C6864;
scrollbar-arrow-color:#000;
scrollbar-track-color:#000;
scrollbar-darkshadow-color:#000;overflow:scroll;
overflow-x:hidden;
scrolling:yes;

5、层加滚动条 代码:overflow-y:scroll; overflow-x:hidden; scrollbar-face-color:#CECECE;

6、链接去边线????
a,a:hover{outline: none;blr:expression(this.onFocus=this.blur());}

7、透明度:
 ie下:filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; 火狐下:opacity: 0.5;
背景透明文字不透明:
background:rgba(0,0,0,0.5);filter:alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
用这个就可以:filter:alpha(opacity=50); opacity: 0.5;

8、文字排版:
(1)writing-mode(设置对象书写方向) 
语法:writing-mode : lr-tb、tb-rl 
参数:lr-tb:从左向右,从上往下 
tb-rl:从上往下,从右向左 
示例:div { writing-mode: tb-rl; } 
(2) text-align(设置对象中文本的对齐方式) 
语法:text-align : left、right、center、justify 
参数:left:左对齐  right:右对齐 
center:居中  justify:两端对齐

9、解决png图片在ie6下不透明问题:
#id{background:url(图片路径) ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="图片路径");_background:none;}

10、iframe背景透明:
<iframe allowtransparency=true  id="fream1" frameborder="0" scrolling="no" width="75px"  height="16px" src="01.html"></iframe>
子页面
body
{
    background-color: transparent;
}

11、href="#"与href="javascript:void(0)"的区别:
href="#"默认是href="#top";
href="javascript:void(0)"是死链接;

12、flash背景透明:
<embed .....wmode="transparent"....>

13、css3阴影:
-moz-box-shadow:1px 3px 6px #a3a3a3;-webkit-box-shadow:1px 3px 6px #a3a3a3;box-shadow:1px 3px 6px #a3a3a3;position:relative;behavior:url(js/pie.htc);

14、ie6 png24半透明兼容:
 behavior: url(/share/include/iepngfix.htc)

15、自定义密码输入显示的样子如:*或者#

<input id="a" /> 
<input id="b" onkeyup="document.getElementById('a').value=this.value.replace(/./g,'*');" />

 

css:#a { left: 10; top: 10; font-size: 12px; font-family: 宋体; } 
#b { left: 10; top: 10; font-size: 12px; font-family: 宋体; -moz-opacity:0;opacity: 0;filter: alpha(opacity=0); }

16、css3旋转: 其中50为角度 filter兼容ie的

transform: rotate(50deg);
 -o-transform: rotate(50deg);
 -webkit-transform: rotate(50deg);
 -moz-transform: rotate(50deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

17、由于IE8以下版本不支持CSS3,要想实现上述的transform(转换)效果,须使用IE滤镜,代码如下:

<!--[if IE]>
<style>
.transform–rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  right:-15px; top:5px;
}
</style>
<![endif]-->
rotation取值[0,1,2,3],依次代表旋转 [0deg,90deg,180deg,270deg],

18、css3阴影:
-moz-box-shadow:1px 3px 6px #a3a3a3;-webkit-box-shadow:1px 3px 6px #a3a3a3;box-shadow:1px 3px 6px #a3a3a3;position:relative;behavior:url(js/pie.htc);

19、透明度:RGBA 和opacity 之间的不同是前者只会应用到指定的元素上,而后者会影响我们指定的元素及其子元素。

20、CSS3 在 IE 中的特殊处理
     Opacity 透明度:
 opacity: 0.4; /*Chrome、Safari、Firefox、Opera */
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*  IE8 */

  Border-Radius 圆角效果:
   -moz-border-radius: 15px; /*Firefox*/
 -webkit-border-radius: 15px; /*Safari、Chrome*/
 border-radius: 15px; /*Opera 10.5+、IE 6+*/
 behavior: url(ie-css3.htc); /* 调用脚本添加圆角效果 */

  Box Shadow 盒阴影
1、-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',
 Direction=145, Strength=3);
2、 -moz-box-shadow: 2px 2px 3px #969696; /* Firefox */
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */
 box-shadow: 2px 2px 3px #969696; /* Opera 10.5+、IE6+*/
 behavior: url(ie-css3.htc); /* 调用脚本添加阴影效果 */

  
   Gradients 渐变色
 background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
 background-image: -webkit-gradient(linear,left bottom,left top,
 color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
 -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0,
 startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */


   RGBA 颜色
 background: rgba(50, 95, 224, .4);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr='#886287a7', endColorstr='#886287a7');


  Rotation 旋转

-webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
参数 rotation 的选项为 1、2、3 和四,分别代表旋转 90 度、180 度、270 度和 360 度。

21、伪类 首字下沉  :first-letter: 如p:first-letter{...}

22、遮罩:.aa{height: 100%; left: 0;position: fixed; top: 0;width: 100%;z-index: 100; background-color: #000000;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5;opacity: 0.5;}
  父级元素body{height:100%; overflow:hidden;padding:0; margin:0px;}
* html .aa /* IE6 兼容ie6  */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
23、padding-left: 18px;text-indent: -18px;  可以实现下面效果;
例如1、可以实现
    2、可以实现
    3、可以实现可以
         可以实现可以
          可以实现。

24、随屏幕滚动的层:_position:absolute;_top:expression(eval(document.documentElement.scrollTop + 200));
解决闪动问题的办法是在 CSS 文件中加入:

*html{

background-image:url(about:blank);

background-attachment:fixed;

} 或者*body { 

     background-image:url(about:blank); 

     background-attachment:fixed; /* 必须地,防抖动 */



  评论这张
 
阅读(140)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017