新奇的css

收集一些新奇的不常见的正在实验中的css属性,由于浏览器兼容问题比较少用,但是未来有可能会纳入正式标准,我们可以率先在新版浏览器体验一下(建议用Chorme浏览器)

position:sticky

盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

可以用sticky来实现粘性布局,效果如下

css计数器

本质上CSS计数器是由CSS维护的变量,这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。计数器的值通过使用counter-resetcounter-increment操作,在 content 上应用 counter()counters()函数来显示在页面上。

一个列表序号自定义样式

多行文本溢出

-webkit-line-clamp 是一个 不规范的属性,它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。必须结合的属性为display: -webkit-box和 -webkit-box-orient: vertical,比如实现多行文本溢出

.content {
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

border-image

理解border-image属性首先需要理解border-image-source border-image-slice border-image-width border-image-outset border-image-repeat这5个属性,使用方法可以谷歌,可以使用border-image来给边框设置图片

writing-mode

设置或检索对象的内容块固有的书写方向。

horizontal-tb: 文字水平排版,元素从上到下,ie下值为lr-tb

vertical-rl: 文字垂直排版,元素从右到左,ie下值为tb-rl

vertical-lr: 文字垂直排版,元素从左到右,ie无对应值,可以用vertical-rl把元素倒序就行了

标签: css3

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论