一直以来都很少使用 SVG 图片，偶尔使用也发现用 CSS 控制时灵时不灵的，也没有去研究为啥，先写一篇文章提醒自己去研究下。
之前在看一个文章的时候有提到过，background 的这两个属性，确实不常用到，以至于没有几个人知道这两个新属性。
和他们同时期出的 background-size 因为经常用到所以被大众所熟知。
对的，这次我要说的是background-origin 和 background-clip 两兄弟
被忽略的两个Background新属性
鼠标移出时颠倒元素过度效果
今天有一个小伙伴在群里问，怎么让鼠标经过的移出效果和移入效果相反。
比如说
移入的时候先让元素增加宽度，接着增加高度，最后显示内部元素，
鼠标移出的时候，先收缩高度隐藏元素，最后还原宽度。
看了一些回复有些答非所问，或者推荐用 Js 的。
最开始想的是，animation 是不是有一个 direction 属性可以设置反向么，
就想看 transition 是不是也有，但是并没有。CSS transition - MDN
所以就想着用 :hover 来覆盖原先的 transition
一直以来记错的CSS属性：Position 元素定位
我一直记忆的是
position:relative是相对于父级元素定位的，今天才发现原来自己记错了。
也想明白了绝对定位的元素使用margin:auto为什么可以实现垂直居中
今天早上心有点静不下来，就去 SegmentFault 上看了看文章，有一篇文章 【“寒冬”三年经验前端面试总结之 CSS 篇】，
里边的 垂直居中的方法四 我觉得挺奇怪的。
记一个 CSS 伪类的 content 用法
content: url('...');
最近在群里看到一种写伪类 content 的用法，觉得很新奇，
群友一开始使用伪类来显示一个小图标，但是这个小图标比较大，
所以他就像设置宽高来显示这个伪类，但是他怎么都设置不了这个伪类的宽高，
我就和他说你设置伪类的宽高不就好了嘛？（我一直以来都是用伪类设置背景图片的形式来做 icon）
他说不行，我就看到了这个独特的写法…
他是直接在 content 里边写了图片的 url，然后神奇的是居然可以显示 content 里填写的图片！！！
CSS border-radius 制作特殊圆
以前只知道 border-radius 有一个圆角半径，今天在做一个半圆的时候突然发现，它还有 x 轴和 y 轴属性。
先来看一下 MDN 中 border-radius 说明：
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
也就是说，每个圆角都有 圆角半径、 水平半长轴 和 垂直半长轴 属性值:
CSS 中的文字截断
单行文字的截断非常简单，但多行文字的截断就很麻烦了，
经常要配合 JavaScript 或者 其他语言进行字符串截断，然后拼接上 “…”
突然发现 line-clamp 它可以完成以纯 CSS 的多行文本截断，
并且配合 text-overflow: ellipsis 就可以在尾部加上省略号，
当然 overflow: hidden 并不可缺少
