通过 CSS3 的calc()函数布局实现类似“聚焦”效果，向Web前端设计者生动形象地展现了CSS3 calc()精彩绝伦的用途，加深了对calc()布局功能的印象。
calc()函数语法
calc() = calc(四则运算)
calc()函数说明
- 用于动态计算长度值；
- 运算符前后都需要保留一个空格，例如：width:calc(100% - 10px);；
- 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持"+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
calc()函数兼容性
IE9+，现代浏览器均支持。
calc()效果演示
.company-card { width:320px; height:80px; padding: 16px 20px; position: relative; border: 1px solid #fff; z-index: 1; background:red;}.company-card:after, .company-card:before { content: ""; display: block; position: absolute; background-color: #fff; z-index: -1;}.company-card:before { height: calc(100% + 2px); width: calc(100% - 16px); top: -1px; left: 8px; background:blue;}.company-card:after { height: calc(100% - 16px); width: calc(100% + 2px); top: 8px; left: -1px; background:yellow;}.company-card:hover { border-color: #000;}<!--主要HTML代码--><p class="company-card">为了演示DIV容器的z-index(层序)，给DIV容器填充了颜色……通过 CSS3 calc()函数巧妙地实现了“聚焦”特效</p>
CSS代码效果说明
红色DIV容器是父容器，黄色容器和蓝色容器分别是:after伪类、:before伪类创建的容器；
将黄色DIV容器的宽度在父容器的宽度基础上(块级元素100%)+2px，通过相对父容器的绝对定位left左边距-1px实现左右两侧的覆盖；
将蓝色DIV容器的高度在父容器的高度基础上(块级元素100%)+2px，通过相对父容器的绝对定位top上边距-1px实现上下两侧的覆盖；
calc()总结
通过布局实践，calc()函数的优点在于让Web前端人员不需要知道父容器具体的width/height就可以实现CSS绝美布局，calc()不愧是响应式神器！
