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时显示
站长总结的十个常用但是有可能记不住的css
admin
2016-08-28 09:08:06
¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!
支付宝扫一扫打赏
微信扫一扫打赏
本文《站长总结的十个常用但是有可能记不住的css》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/css/667.html,否则禁止转载,谢谢配合!
阅读排行
小程序插件
站长推荐
-
百度小程序审核被拒原因--汇总各种奇葩原因
- 486
-
重新对百度支付进行编写封装(百度智能小程序支付)
- 370
-
phpcms小程序插件api接口升级到4.3
- 814
-
phpcms封装的微信h5支付源码DEMO参考
- 755
添加微信好友
文章点评