QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

css基础

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

 admin  2016-08-28 09:08:06
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,如若转载,请注明出处:https://www.pweb123.com/html/css/667.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序