随笔分类 - CSS3样式
实践过程中的CSS3样式
摘要：样式 ： pointer-events: none; <el-form-item label="xxx" prop="saleId" > <base-selectPage v-model="ruleForm.saleId" :data="subSalesList.length ? subSalesL
阅读全文
摘要：针对于一个说明文字，要求2行布局，超出的部分进行隐藏的，可以使用一下方法，并且可以兼容多个浏览器 overflow: hidden; height: 30px; line-height: 15px; text-overflow: ellipsis; display: -webkit-box; -we
阅读全文
摘要：/*iPhone6和iPhone8*/@media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) {/*code*/ } /*iPhone
阅读全文
摘要：1.先使用这串代码，上传到服务器，生成一个链接 <script type="text/javascript"> var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersio
阅读全文
摘要：判断是否是微信浏览器、微信端打开 var wx= (function(){ return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 } )(); if(wx){ $(".android").click(fun
阅读全文
摘要：//判断访问设备，方便后面针对不同设备调用代码 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|w
阅读全文
摘要：兼容iphone4/4s： @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ }兼容iphone5 ： @media (device-height:568px) and (-webkit-min-device-p
阅读全文
摘要：精灵图的使用 1.给一个容器定义一个大小（宽高） 2.引入背景图 3.定位到自己你想要的图片位置 例如： background-position: 0 0; background-position: -20px 0; background-position: 0 -20px; background-
阅读全文
摘要：背景色的渐变 1）线性渐变 background: -webkit-linear-gradient(60deg,#fff 10%, #f00 30%, #0f0 50%, #00f 70%, #000); 通过色号进行背景色线性渐变 background: -webkit-linear-gradie
阅读全文
摘要：针对边框的渐变色其实有两种理解: 第一种是纯边框： 写法是： border:1px solid #ddd; border-image: -webkit-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20; border-image: -moz-line
阅读全文
摘要：多背景图的设置 background-image:url(1.jpg),url(2.jpg); background-image:url(1.jpg) no-repeat center/auto 200px,url(2.jpg) no-repeat center/auto 300px ,...; 设
阅读全文
