CSS黑科技补充篇

LeanCloud 发布于2019-08-28 18:11 / 2131人阅读

摘要：原文来自继上一次写的黑科技之后，这次貌似还专门去找了一些中可能还是比较不太会引起开发者注意的属性。其实在中，你可以使用这个属性来指定相应的样式，比如上面这一行声明就可以将元素中的空单元格隐藏起来。暂时就补充这么多

原文来自：https://jellybool.com/post/css-that-you-may-not-know-part-2

继上一次写的CSS黑科技之后，这次貌似还专门去找了一些CSS中可能还是比较不太会引起开发者注意的属性。

empty-cells

其实在table中，你可以使用empty-cells这个属性来指定相应的样式，比如：

table {
  empty-cells: hide;
}

上面这一行声明就可以将table元素中的空单元格隐藏起来。

border-image

其实这个在开发中可能会比较少见到，如果不是我特意去看文档，真心不会发现还有这个border-image，没错，就如名字的意思一样，你可以给border指定image：

.border-image-example {  
    -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
    -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
    border-image: url(border-image.jpg) 45 20 45 30 repeat;
}

text-decoration

在习惯了对text-decoration赋值为none之后，我们需要重新来认识一下这一位小伙伴了，它其实是可以接受三个变量声明：

a {
  text-decoration: overline aqua wavy;
}

这三个分别是代表：text-decoration-line， text-decoration-color 和 text-decoration-style

clip

可能很多人在刚开始使用clip的时候都是这样写的：

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

然后很惊讶地发现竟然没有起作用，为什么呢？所以在这里需要注意的地方是clip是只在position为absolute或position为fixed时候起作用的。

::first-letter

这个感觉比较神奇，虽然对于我们常用CSS修饰中文文本可能没有很大的用处，不过我看到这个时候其实还是觉得比较意外的，竟然还有这个东西：




    I am sample text

然后CSS可以这样写：

.text::first-letter {
  color: blue;
  background: yellow;
}

第一个字母I就会被修饰到，很神奇。暂时就补充这么多....

Happy Hacking

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111077.html

## CSS 的黑科技

摘要：所以在使用属性选择器的时候，注意大小写问题。目前就只觉得这些黑科技需要提醒自己一下，有可以补充。原文来自：https://jellybool.com/post/css-that-you-may-not-know 补充篇在这里 http://segmentfault.com/a/1190000003029085 昨天由于某些原因没有写博客，之前说好的每天一篇的，这篇...

wh469012917 2019-08-28 18:12 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
细数 JavaScript 实用黑科技(二)

摘要：前言书接上文细数实用黑科技一本文介绍独孤九剑和两篇最高内功心法。可以将变量转换为布尔值。可以把任何类型的值转换为布尔值，并且只有当这个变量的值为的时候才会返回，其他情况都返回。同样的，函数体内部声明的函数，作用域绑定函数体内部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言书接上文：细数 JavaS...

马忠志 2019-08-23 12:07 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0