zoukankan      html  css  js  c++  java
  • css 干货


    去掉地图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{0px}
    菱形图片动画:img{ 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;

  • 相关阅读:
    Completely disable mousewheel on a WinForm
    C# Form内存回收
    解锁用户
    CentOS7+JDK8编译Hadoop2.6.4
    网址收藏
    pvresize
    Linux crontab 命令格式与详细例子
    在CentOS 7中安装与配置JDK8
    Disable SELinux CentOS 7
    Python3标准库:math数学函数
  • 原文地址:https://www.cnblogs.com/youziwulala/p/9182323.html
Copyright © 2011-2022 走看看