返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
css基础当前位置:首页 > HTML教程 > css基础 > 正文

站长总结的十个常用但是有可能记不住的css

发布时间:2016-08-28 09:06:05   来源:   点击:
1、圆角
-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;behavior:url(border-radius.htc);

2、透明度
opacity:0.85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* ie8  */ filter:alpha(opacity=85);    /* ie5-7  */ -moz-opacity:0.85;    /* old mozilla browser like netscape  */ -khtml-opacity: 0.85;

3、图片放大

img {-moz-transform:scale(1.1, 1.1); -webkit-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
:hover img { -moz-transform:scale(1.1, 1.1); -webkit-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }

4、溢出隐藏
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

5、水平位移特效
a {-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
a:hover {-webkit-transform:translateX(10px); -moz-transform:translateX(10px); transform:translateX(10px);}

6、渐变
transition:400ms

7、阴影特效
-moz-box-shadow:2px 4px 8px #7A5215; -webkit-box-shadow:2px 4px 8px #7A5215; box-shadow:2px 4px 8px #7A5215;
2代表水平阴影   4代表是垂直阴影  8模糊度 #7A5215阴影颜色

8、文本阴影
text-shadow:2px 2px 5px #333333;

9、一般兼容性
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

10、css3响应式代码

@media screen and (max-width:1200px){
.logo { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: 0px;}
}//当宽度小于1200时显示

@media screen and (min-width:1200px){
.logo { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: 0px;}
}//当宽度大于1200时显示


版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814