几个css函数的妙用

wild__programmer

于 2017-09-27 10:56:27 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： css揭秘文章标签：函数 css

本文链接：https://blog.youkuaiyun.com/wild__programmer/article/details/78110538

css揭秘专栏收录该内容

5 篇文章

订阅专栏

使用自定义data属性和attr()属性

效果：在html自定义tooltips 显示在盒子底部

<a class="caption" href="#" data-title='Vulture' data-description='...'>
< img src="img.jpg" alt="Illustration"/>
</a>
.caption::after {
  content: attr(data-title);
    ...
}

calc()实现智能栅格

eg：.dashed-line-about {
        width: 0;
        height: calc(100% + 220px);
        position: absolute;
        z-index: 2;
        top: -110px;
        left: 14% ;/*写给不支持calc()的浏览器*/
        left: calc(14% - 24px);
        left: -moz-calc(14% - 24px);
        left: -webkit-calc(14% - 24px);
        border-right: 1px dashed #ECECEC;
    }