个人收集的CSS技巧(一)

开个坑…写点平时积累、收集到的CSS技巧吧(半娱乐向)
考虑到IE8等更为古老的浏览器渐渐退出舞台
文中所记录的技巧更偏向于更新、更高级的CSS特性
关于某些属性在浏览器兼容方面的情况,可以浏览caniuse.com


文字模糊效果

p {
   color: transparent;
   text-shadow: 0 0 5px #000;
}

给文字一个透明的颜色,然后依靠黑色阴影来给出一种模糊,存在残影的感觉,效果很赞,关键代码很简单。修改text-shadow属性的第三个参数,可以设置残影的模糊度。

让鼠标指针消失(一般没什么卵用的恶搞)

*{
  cursor: none !important;
}

这个属性很多人都知道,没什么技术含量……但是拿来恶搞一下还是不错的~~

:empty选择器

li {
  padding: 20px;
  background-color: #ccc;
}
li:empty {
  display: none;
}

<ul>
  <li>这里有文字</li>
  <li></li>
  <li>asdfasdf</li>
</ul>

做网页的时候经常有这种情况。有的标签里面文字为空,但是这个标签被应用上特定的样式,即便文字为空还是会展现出来。如果想要避免这种情况。你可以尝试使用CSS3的选择器:empty

菱形图片与裁切路径

假设要用css来实现以下的效果,大家会想怎样的办法?


菱形图片

大部分人的想法应该是用一个div把图片包裹起来。然后将外侧的div顺时针旋转45度,但图片也会跟着外侧的div旋转,这不是我们想要的结果。于是我们只好再将图片逆时针旋转45度。这样图片看起来就正常了。不过还有一个问题在于,旋转过后,图片的宽度理应要等于外侧div对角线的长度,也就是要乘以√2,所以我们将图片再放大√2倍。根据上述思维,我们得到了以下代码:

  .picture {
      width: 400px;
      transform: rotate(45deg);
      overflow: hidden;
  }
  .picture > img {
      width: 100%;
      transform: rotate(-45deg) scale(1.42);
  }

  <div class="picture">
    <img src="xxx.jpg">
  </div>

以上方案的实现稍微有点复杂。而且存在以下缺点:

  1. 难以处理非正方形图片
  2. 需要额外的HTML元素(上例中的div)
  3. 代码量较大

接下来看看另一种基于裁切路径(clip-path)实现的方案。

img {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

这个方案相比方案1看起来愉悦了不少。但是……浏览器兼容性就比较惨了……


clip-path兼容性

IE全部不支持,android4.4以前的浏览器也完全不支持,其它浏览器上可能也或多或少存在些问题。不过这个方法真的非常简洁,而且可以很好地适应非正方形的图片。
关于clip-path的更多信息,可以参考MDN上的文档。clip-path属性介绍

背景动画效果

使用线性渐变background-position来进行背景动画的处理。

div {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(#ccc, #000, aqua);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: all 0.5s;
}

div:hover {
  background-position: 0 0;
}

calc属性

在网页布局的过程中,我们经常会用到百分比这一属性。但是不同的设备分辨率不同,同样是100%的宽度自然就可能对应不同的px。假设有一个需求,需要设置一个元素为屏幕宽度的50%+20px。面对此问题,往往需要借助js来完成这一需求。
为了解决这种情况,calc闪亮登场啦。

div {
  width: calc(50% + 20px);
  height: calc(50px + 10em - 2rem);
}

calc支持百分比和px、em的混合运算,能给我们提供许多的便利。这边着重注意下,运算符号和长宽数值要有空格隔开
浏览器支持情况可以参考caniuse
在安卓上的支持还是有点捉急啊…毕竟android4.x的用户还是有一定数量的…

vh与vw

div {
  width: 10vw;
  height: 15vh;
}

vw和vh都是相对viewport的。1vw等于视窗宽度的1%,1vh等于视窗高度的1%。
个人感觉vh的实用性还是蛮不错的。因为在使用css布局的时候,高度和百分比结合的情况相对会麻烦点。

其实还有一种rem布局的方案,就是通过设置根元素的font-size,让一个rem的宽度固定等于屏幕宽度的一定比例,如1rem=10%屏幕宽度。然后用rem来作为元素宽、高的计量单位。
其实最近新出的微信小程序,布局中有一个叫做rpx的东西。思想和rem布局就十分类似。
无非是1rpx = 屏幕宽度 / 750

最后看下兼容吧vw兼容性
老安卓4.3还是不支持

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,101评论 1 91
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,256评论 1 3
  • 赶上拥挤的班车来到这里,已是晌午时分,小憩过后,走上街去,我遇见了黄昏中的乌镇。 西栅,初闻便觉奇怪,恰如想象中黛...
    si宇阅读 455评论 13 9
  • PPT:首先是灵感。不管是排版配图配色等等都需要灵感,一些小创意也会让PPT产生意想不到的变化。自己大脑的思维能够...
    李咧咧阅读 401评论 0 0