通过 CSS3 的calc()
函数布局实现类似“聚焦”效果,向Web前端设计者生动形象地展现了CSS3 calc()
精彩绝伦的用途,加深了对calc()
布局功能的印象。


calc()
函数语法
calc() = calc(四则运算)
calc()
函数说明
- 用于动态计算长度值;
- 运算符前后都需要保留一个空格,例如:
width:calc(100% - 10px);
; - 任何长度值都可以使用
calc()
函数进行计算; calc()
函数支持"+", "-", "*", "/"
运算;calc()
函数使用标准的数学运算优先级规则;
calc()
函数兼容性
IE9+,现代浏览器均支持。
calc()
效果演示
/*主要CSS代码*/
.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代码-->
<div class="company-card">
为了演示DIV容器的z-index(层序),给DIV容器填充了颜色……通过 CSS3 calc()函数巧妙地实现了“聚焦”特效
</div>

CSS代码效果说明
红色DIV容器是父容器,黄色容器和蓝色容器分别是:after
伪类、:before
伪类创建的容器;
将黄色DIV容器的宽度在父容器的宽度基础上(块级元素100%)+2px,通过相对父容器的绝对定位left左边距-1px实现左右两侧的覆盖;
将蓝色DIV容器的高度在父容器的高度基础上(块级元素100%)+2px,通过相对父容器的绝对定位top上边距-1px实现上下两侧的覆盖;
calc()总结
通过布局实践,calc()
函数的优点在于让Web前端人员不需要知道父容器具体的width/height就可以实现CSS绝美布局,calc()
不愧是响应式神器!