css 干货

标签：gradient   tap   logo   AC   one   hover   ali   splay   button   

百度地图秘钥 A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH
去掉地图logo：.BMap_cpyCtrl {display: none;} .anchorBL{display: none;}
禁止页面缩放：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
动画效果 {transition: all 0.3s ease-out 0s;} #all也可以是backgrould-color等具体见火狐网页
兼容-背景渐变 background:-moz-linear-gradient(right,#f84c71,#fd7c72);/*火狐*/background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#f84c71), to(#fd7c72));/*谷歌*/background: -o-linear-gradient(right,#f84c71,#fd7c72);/*opera*/background: -ms-linear-gradient(right,#f84c71,#fd7c72);/*IE*/filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #f84c71, endColorstr = #fd7c72);
兼容-移动端button，select默认样式 appearance: none;-weblit-appearance: none;
兼容-移动端点击闪烁 css *{-webkit-tap-highlight-color:transparent}
居中-块级元素 position：absolute；left:0; right:0 ;top:0 ;bottom:0; margin:auto;
垂直居中： top:50%;left:50%; transform:translate(-50%,-50%);
水平居中 -多个块级元素 <div style="text-alient:center;"><a style=“display: inline-block;margin-right：20px；”></a><a style=“display: inline-block;”></a></div>
居中-flex布局 justify-content：center；align-items: center;flex-direction:column;display: inline-flex;
文本-两端对齐 text-align: justify;
文本-多行显示省略号 overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
块级元素均匀分布且两端对齐 父级元素（ul）：display: flex;-webkit-box-pack: justify;justify-content: space-between;
滚动条隐藏 ::-webkit-scrollbar{width:0px}
菱形图片动画：img{width: 300px;clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);transition: 1s clip-path;}
img:hover{clip-path: polygon(0 0,100% 0,100% 100%,0 100%);}
去掉inline-block间隙：父元素font-size: 0;-webkit-text-size-adjust:none;

css 干货

标签：gradient   tap   logo   AC   one   hover   ali   splay   button   

原文地址：https://www.cnblogs.com/youziwulala/p/9182323.html