<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单位以及列表编号功能。
*请认真填写需求信息,我们会在24小时内与您取得联系。