随笔分类 -  CSS

摘要:今天在一款三星 4.2.2 的 webview 里,出现 animation 特别快的问题,把: 修改为: 就好了 .xxx 也定义 width 了,但百分比还是出错了,不靠谱 阅读全文
posted @ 2017-11-09 19:16 xngeer 阅读(321) 评论(0) 推荐(0) 编辑
摘要:1. Android,定义 2. iOS,定义 注,呼起数字键盘后,用户输入是否为纯数字,最大最小值限制,还是由 js 处理了。 iOS 不支持设置 min/max 阅读全文
posted @ 2017-07-06 14:26 xngeer 阅读(334) 评论(0) 推荐(0) 编辑
摘要:如今 css 的单位越来越多了,px, em, rem, 微信的小程序又出来个 rpx 可以用 less 自动生成需要的单位 但当你只是想把一个已有的页面转换成小程序时,可能更需要一个 px -> rpx 的小工具,比如这个 阅读全文
posted @ 2016-09-29 11:50 xngeer 阅读(611) 评论(0) 推荐(0) 编辑
摘要:出自:小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 blur.svg 参考: 不得不收藏的——IE中CSS-filter滤镜小知识大全 Blur Filter 在线 demo--IE滤镜 阅读全文
posted @ 2016-08-16 13:56 xngeer 阅读(7728) 评论(0) 推荐(0) 编辑
摘要:/** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines($lineCount: 2){ display: -webkit-box; -webkit-line-clamp: $lineCount; -webkit-box-orient:... 阅读全文
posted @ 2016-04-20 10:19 xngeer 阅读(227) 评论(2) 推荐(0) 编辑
摘要:$unit: .667px; @function px($value){ @return $unit * $value; } $unit: 1px; 时 px(1) 就是 1px 一般情况下,设计师给的 psd 是 720px,为了切图时方便调试,就把 $unit 默认设置为 。667px,即 2/3 等上线时,如果要按实际大小显示,再定义 init-scale,就把 $unit 改成... 阅读全文
posted @ 2016-04-20 10:17 xngeer 阅读(187) 评论(0) 推荐(0) 编辑
摘要:编译scss文件时,如果出现如下错误 解决办法就是在报错的scss文件顶部加上编码类型即可: 引自:这里 阅读全文
posted @ 2016-04-14 17:04 xngeer 阅读(1048) 评论(0) 推荐(0) 编辑
摘要:原文地址:这里 阅读全文
posted @ 2016-04-14 15:48 xngeer 阅读(230) 评论(0) 推荐(0) 编辑
摘要:需求:如果是竖图,按宽度等比缩放,显示中间的正方形如果是横图,按高度等比缩放,显示中间的正方形如:用到 background-size: cover;示例: 阅读全文
posted @ 2015-12-22 14:40 xngeer 阅读(782) 评论(0) 推荐(0) 编辑
摘要:word-break:normal;word-wrap:break-word;引自 这里 阅读全文
posted @ 2015-11-27 17:06 xngeer 阅读(515) 评论(0) 推荐(0) 编辑
摘要:1. 理想中的效果是这样的2. 然后想改一下圆圈的大小3. 容器大小为偶数,图片大小为奇数,就会使图片并不真正居中,如果仔细量一下,会发现图片上面比下面多1px!貌似只有 background-size: 100% 100%; 可以解决这个问题: 阅读全文
posted @ 2015-07-02 14:42 xngeer 阅读(753) 评论(0) 推荐(0) 编辑
摘要:css中是这样写的:div{ border-bottom: 1px solid #dfe5e4;}但在手机上,像素比不为 1 ,由于 webview 的灰度渲染, border 一般会显示为 2-3px如何使手机上的 border 也显示为 1px ?尝试了div{ background... 阅读全文
posted @ 2015-01-16 18:52 xngeer 阅读(1136) 评论(0) 推荐(0) 编辑
摘要:.box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; /* box-orient *... 阅读全文
posted @ 2014-12-02 11:09 xngeer 阅读(12288) 评论(2) 推荐(1) 编辑
摘要:引自:http://www.w3cplus.com/css/front-end-web-development-quiz.htmlQ7:下面代码弹出值是什么?x = 1;function bar() { this.x = 2; return x;}var foo = new bar();... 阅读全文
posted @ 2014-07-09 16:56 xngeer 阅读(556) 评论(0) 推荐(0) 编辑
摘要:span{ display: block; background: #f4f4f4; color: #333; font-size: 14px; -webkit-border-radius: 20px; border-radius: 20px; text-a... 阅读全文
posted @ 2014-07-02 11:58 xngeer 阅读(15902) 评论(0) 推荐(2) 编辑
摘要:pointer-events : none; 引自:http://www.thinkphp.cn/topic/4702.html 阅读全文
posted @ 2014-06-23 15:33 xngeer 阅读(518) 评论(0) 推荐(0) 编辑
摘要:问题: 手机浏览器上,竖直并排的两张图片中间有条线。 设置了margin, padding, font-size, line-height 都为0,还有问题解决办法: 只要上面的图片高度为偶数,就可以避免这个bug 阅读全文
posted @ 2014-01-09 11:53 xngeer 阅读(577) 评论(0) 推荐(0) 编辑
摘要:使用IE注释没有问题 这里会出现幽灵文字 阅读全文
posted @ 2013-12-19 19:31 xngeer 阅读(409) 评论(1) 推荐(0) 编辑
摘要:很多时候,"更多"会和title在一行显示,放在右边我们可能马上想到这样做:h1 a{ float: right;}<h1>这是个title<a>更多</a></h1>但其实应该这样做:h1 a{ float: right;}<h1><a>更多</a>这是个title</h1>是不是很奇妙?引自《无懈可击的web设计》 阅读全文
posted @ 2013-06-17 14:39 xngeer 阅读(258) 评论(0) 推荐(0) 编辑
摘要:让ie也能享用css3但导入的文件太大,有40K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu 阅读全文
posted @ 2013-05-07 17:07 xngeer 阅读(303) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示