随笔分类 - css3
摘要：目录 "理解坐标系" "复合变换" 如何理解斜切 skew，先看一个 demo。在下面的 demo 中，有 4 个正方形，分别是 红色：不做 skew 变换， 绿色：x 方向变换， 蓝色：y 方向变换， 黑色：两个方向都变换， 拖动下面的滑块可以查看改变 skew 角度后的效果。切换 selecto
阅读全文
摘要：以前写博客啊，总想写一篇大作，然后希望能挂到博客园首页，隔一会儿看看阅读量有多少。其实哪有那么多大作，大部分时间都是解决了一个小问题，然后需要记录一下。比如下面这篇。 今天遇到一个需求是，打印网页时，不要显示a标签的URL。如下图： 这个问题出现的原因是bootstrap的样式有这么一段: 就是在打
阅读全文
摘要：webkit input placeholder 这个伪类用于设置输入框placeholder文字的样式,基本可以设置例子如下: webkit text stroke "参考链接" 这个伪类顾名思义就是给文字描边的意思，跟text shadow有一定的相似之处。可以用于定义文字描边的 宽度 和 颜色
阅读全文
摘要：打印样式 打印样式就是针对网页被打印时设置给文档的样式，由于打印时是显示在纸上，跟屏幕还是有区别的，对于有打印需求的网页往往需要设置专门的打印样式来适配页面。 @media print 声明自己是打印样式有两种方法：在css文件中可以使用@media print,在html文件的style标签中写上
阅读全文
摘要：前两天想给博客上添个书签效果，类似于下面这样: 在网上搜索一番后，发现一篇 "纯css书签导航按钮" 用三个div实现了这个效果。但是博客园可没有给我这么多div，所以试着用伪类实现了一下。 before,after伪类 这两个属性就像正常元素的小左和小右。他们没有元素标签，但是却有元素的css属性
阅读全文
摘要：一般来说，class就是给一堆元素添加样式的，但是还有二般的用法，就是用来作为一个开关，来切换他的子孙元素的样式。举个例子： 这里有四个li元素和一个button元素，现在当点击button时，使每一个li元素里面的第二个span元素的字体变成红色。 这时候就可以通过切换父元素的class来改变一群
阅读全文
摘要：由于浏览器自带的文件上传元素太丑，我们大多数情况下都是将它隐藏起来，用一个漂亮的按钮来代替。 今天我就碰到了这么一个需求，一开始觉得不就是把input不透明度设为0，然后覆盖在button上嘛，有什么难的。 2018 1 22更新: 采用label的for属性，然后将input元素隐藏，这样，点击l
阅读全文
