随笔分类 -  css3

魔性的less
摘要：.wwbgi(@classname, @imgurl) { .webp .@{classname} { background: url('@{imgurl}') green; } .@{classname} { background: url('@{imgurl}') red; } } .wwbgi(title-bg, '~./img/card-yellow.p... 阅读全文
posted @ 2018-06-06 19:09 暖风叔叔 阅读(140) 评论(0) 推荐(1)
用border-image实现波浪边框
摘要：border-image的介绍 http://www.w3school.com.cn/cssref/pr_border-image.asp 先看一个效果： http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image 实战应用 原理查看： http 阅读全文
posted @ 2016-04-13 11:18 暖风叔叔 阅读(3263) 评论(0) 推荐(1)
用最简单的css3代码实现定制switch开关
摘要：<style> /* 滑动开关 */ .switch { width: 1.57333333rem; height: 0.74666667rem; border-radius: 0.37333333rem; position: relative; background-color: none; *z 阅读全文
posted @ 2016-04-12 12:33 暖风叔叔 阅读(367) 评论(0) 推荐(0)
精简的网站reset 和 css通用样式库
摘要：参考链接：http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/reset.cssbody{ line-height:1.4; color:#333; font-family:arial; font-size:... 阅读全文
posted @ 2016-01-24 02:54 暖风叔叔 阅读(3512) 评论(0) 推荐(12)
圣杯布局和双飞翼布局的作用和区别
摘要：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮 阅读全文
posted @ 2016-01-21 01:40 暖风叔叔 阅读(12936) 评论(1) 推荐(62)
css常用代码
摘要：透明度： 英文大小写： 文字超过部分显示省略号： 单词换行，文本换行word-wrap，word-break，white-space http://jingyan.baidu.com/article/e75aca855b1500142edac6d0.html 优雅的多平台字体设置 判断iphoneX 阅读全文
posted @ 2015-07-16 11:56 暖风叔叔 阅读(227) 评论(0) 推荐(0)
同级兄弟元素之间的CSS控制
摘要：为了实现这个导航效果：选中菜单中某一项，隐藏掉自身的左边背景线条，同时让他的下一个兄弟元素也隐藏掉线条。有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。临近兄弟：用 ＋ 表示，只匹配该元素后边的第一个同级元素。普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。给个例子：sdfsdfsdf... 阅读全文
posted @ 2015-07-11 12:15 暖风叔叔 阅读(5351) 评论(0) 推荐(2)
css3 transition的各种ease效果
摘要：http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function2linear 平均速度ease 快启动，慢停止，物理原则ease-in 先慢，后快ease-out 先快，后慢ease-in-out 先慢，再快，再... 阅读全文
posted @ 2015-07-03 13:01 暖风叔叔 阅读(1619) 评论(0) 推荐(1)