CSS outline实现意想不到的效果

今天在微博看见@zhangxinxu召集各种实现了十字功能的方法。@大地Dudy和@灵感_idea都想到了用outline-offset这个方法，大开眼界。我就开始关注起了这个css属性。 这个属性其实很简单，就4种类型： outline-width outline-style »

多行文字溢出超过限定宽度，自动添加省略号

常会有“文字溢出自动添加省略号”的需求： 单行文字省略 或者，需要指定更多行数再添加省略号： 单行文字省略 开始实现吧： 单行文字添加省略号 css核心代码： overflow: hidden; /* 内容被剪裁，其余内容不可见 */ text-overflo »

CSS3 Animals - Sparrow

最近很流行做CSS 3的卡通人物或者动物，作为小麻雀，我也来体验一把。 虽然自我感觉UI不是特别的萌萌，但是我的“小麻雀”还是实现咯！ 喳喳喳~请叫我小麻雀！嘿！ 观赏地址：小麻雀 »

自定义高亮code功能

.css{ margin: 0; padding: 0; } 本来是想等新版的blog出来再实现。 但是Markdown实在是太方便了，在原来这个也稍微设置一下，这样就不用截图了，直接coding出来。 实现方法：原本的blog是没有支持Markd »

惊现CSS3 filter

看了一篇文章，才开始知道原来不止IE才有filter，原来CSS3也有。这篇文章的链接：http://www.xuanfengge.com/css3-grayscale-black-and-white-filters.html 哈哈，顺便说一下，它的导航很酷哦，可以在上面弹钢琴。 »

CSS外边距合并（叠加）

几种CSS外边距合并的情况 一个元素的下边距和一个元素的上边距重合 一个元素包含着另一个元素 前提：中间没有内边距和边框分隔开 空元素的上边距和下边距 前提：是个空元素，没有内容，没有内边距，没有边框 为什么会合并？ 总的来说，从两个垂直外边距合并时，将形成一个外边距，外边距的值 »

总结-活动领取页面（计时功能）

做的第一个活动页面，还是挺有意义的。终于可以归档啦： 问题多多，收获自然也多多。写个总结： 一.页面部分 data参数用法 HTML中：data-id=”01″ / data-type=”0″ 在ajax中： var $this = $(this); var id = $th »

清除浮动clearfix

一直有在用，但是没有分析几种清楚浮动的方法和他们之间的比较。 为什么要清除浮动？ 盒子里用了CSS float属性，父级对象不能被撑开。 这是6个float:left的<li>，父级<ul>添加上了边框，明显没有撑开。 这样的副作用是什么？ 背景效果出不来 »

CSS3 text-overflow

作用 文本溢出时发生的事情。 用法 text-overflow: clip | ellipsis | string; clip:修剪文本 ellipsis:显示省略号代表修剪文本 string:给定字符串代表修剪文本 兼容性 所有主流浏览器均兼容 搭配使用 overflow:hi »

CSS3的clip

一句话介绍 裁剪图像。 基本语法 .mkq { clip: <shape>|auto|inherit; } ：函数功能，目前只有rect()可用 auto：和没剪裁过一样 inherit：继承父元素 举例： .mkq{ clip: rect(0,0,2 »

分享制作指针工具

记得用指针用的比较多的年代，是在小学、初中的时候。 那时候，见得最多的是windows系统上的自定义动态鼠标指针，印象最深的是那款流氓兔鼠标指针，吼吼~ 其次，最普遍的还有qq空间的鼠标指针，女生比较喜欢`(∩_∩)′。 但是近几年，自定义指针越来越少见。 我想，主要原因应该是： »

CSS Reset ，你选对了吗？

一直想认认真真写一次关于Reset CSS的文章。 共4种方案。 有兴趣的小伙们，求交流你们用什么来CSS Reset？ *{margin: 0;padding: 0;} —— 被摒弃的方案 学名是Global White Space Reset，据说一开始格外受欢迎，但现在已经 »

CSS3 box-sizing

CSS Box model 分两种： W3C标准模型 IE的传统模型（IE5.x以及Quirks模式的IE 6、7） bos-sizing与盒模型的关系 三种取值： box-sizing: content-box;  W3C标准box model box-sizing: bord »

box-shadow——发现没有发现的角落

平时，比较喜欢用box-shadow。 今天，才发现原来Box-shadow具有多重阴影效果的功能，啦啦啦~ 重新探索下box-shadow未知一面。 1、多重阴影效果 box-shadow可以同时使用多次，来一个四色阴影吧 样式一： .css-1 { width:1 »

院网前端总结

回想在工作室的日子——贝塔豪斯工作室，已经近两年了，带着一直以来对小贝贝的那份自始至终的向往和从未改变过的约定，回忆着和老师、小伙们相处的日子。这段，一起去经历，一起分享的日子。一直，归属感和责任感并存。慢慢，已经变成生活的全部。 这次的学院门户网站，是我在工作室做的最后一个校园 »