整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css实现三角符号

<template>
  <div>
    <div class="triangle"></div>
  </div>
</template>
<style scoped>
  .triangle {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent red transparent;
    /* 大部分ie的布局拉伸问题,都直接添加overflow:hidden */
    overflow: hidden;
}
</style>

然我们从事web前端外包开发服务很长时间了,但是对于li-style-type 的名称和对应的符号,依旧是模棱两可的,这方面我们要反省,要加强记忆,要把查询文档放在任何可以快速查到的地方, 你是否和我一样?

css中用list-style-type指定列表(lists)前面符号,如下:

li {list-style-type:符号名称}

符号名称可用的值为:

disc : CSS1 实心圆

circle : CSS1 空心圆

square : CSS1 实心方块

decimal : CSS1 阿拉伯数字

lower-roman : CSS1 小写罗马数字

upper-roman : CSS1 大写罗马数字

lower-alpha : CSS1 小写英文字母

upper-alpha : CSS1 大写英文字母

none : CSS1 不使用项目符号

armenian : CSS2 传统的亚美尼亚数字

cjk-ideographic : CSS2 浅白的表意数字

georgian : CSS2 传统的乔治数字

lower-greek : CSS2 基本的希腊小写字母

hebrew : CSS2 传统的希伯莱数字

hiragana : CSS2 日文平假名字符

hiragana-iroha : CSS2 日文平假名序号

katakana : CSS2 日文片假名字符

katakana-iroha : CSS2 日文片假名序号

lower-latin : CSS2 小写拉丁字母

upper-latin : CSS2 大写拉丁字母

来源:切图网 www.qietu.com

ozilla说明了最新Firefox 68中的CSS功能细节,其跟上Chrome和Safari脚步,支持了Scroll Snap模组,并加入::marker伪元素功能,方便开发者为列表项目加入前置标记,另外还修正了ch单位以及列表编号的功能。

Firefox 68实作了和浏览器Chrome和Safari一致的Scroll Snap模组,Scroll Snap可以让网页容器滚动停止时,自然平滑地滑动到指定元素的指定位置,另外,Firefox 68也移除了早期Scroll Snap Points规范中的老旧属性。

而::marker伪元素则是有助于开发者为列表加入项目符号,这对于复杂元素特别有用,像是需要将图像作为项目符号,或是把列表中的文字包在Span中,以使用不同的项目符号与文字颜色的需求,::marker伪元素可以锁定项目符号本身,让开发者针对项目符号本身进行修改。虽然::marker伪元素只支持少数几个CSS属性,不过所有字体属性都能够使用,开发者可以自由地变化文字样式。

开发者还可以使用display:list-item,将任何元素转换成列表项目,而这样就能在这些元素前面显示项目符号。::marker伪元素是在CSS列表Level 3和CSS伪元素Level 4中的标准,目前仅在Firefox 68和Safari中实作,Chrome则尚未支持。

不同的浏览器,可能对同一个功能有着不同的运作方式,而这样的问题通常是因不同版本的网页平台造成,由于有许多行为并没有被明确地规范,因此Mozilla着手对CSS规范进行许多更改,解决互通性问题,Firefox 68就修正了ch单位以及列表编号功能。