CSS主要整理与浏览器的适配兼容

 

css主要整理

小程序

公众号

电话联系

021-64027696

我们的服务

1.字体换行对齐

xxxx：刚刚好，看见你幸福的样子，于是幸福着你的幸福。草在结它的种子，风在摇它的叶子。我们站着，不说话，就十分美好。不管前方的路有多苦，都比站在原地要幸福。小时候，幸福是一件简单的事。长大后，简单是一件幸福的事。人总在接近幸福时倍感幸福，却在幸福进行时患得患失。

2.文字只显示一行，超出用点表示（需要设置宽度，当父级元素使用flex布局时，需要在display：flex；这边设置min-width：0；不然ellipsis会失效！！）

文字只显示一行，超出用点表示。我亦可贪恋烟火，殷实人家，几间瓦房，四方小院，守着流年，幸福安康。你的人生握不住，就任凭日月星辰摆布。三个最重要的人生命题：我是谁，我从哪来，我要到哪去?参差多态，乃是幸福的本源。幸福不是可以套用的公式，幸福来源于世界的百般变化与包容。

3.文字显示两行，超出用点表示。

文字显示两行，超出用点表示文字显示两行。别让那些未说口或者来不及说出口的话变成了永远的遗憾，趁我还爱，趁你还在。对你最后的欺骗，是我最后的尊严。因为我知道路的尽头总有笑容灿烂的你在等我,这让我勇敢.一个人，一场戏，一辈子。 两个人，一台戏，此生唯一。没有不可治愈的伤痛，没有不能结束的沉沦，所有失去的，会以另一种方式归来。你走过的地方，有一树一树的花开，你呢喃的梁间，还留着余温犹存的梦。隔山隔水，隔不断我对你的情意绵绵;说你说我，说不尽我对你的相思连连!对你最后的欺骗，是我最后的尊严。

4.多行文字左右对齐

“轻轻的我走了，正如我轻轻的来，我轻轻的挥手，作别西天的云彩……，众里寻与他千百度，蓦然回首那人却在灯火阑珊处，空山新雨后，天气晚来秋”“去年春恨却来时。落花人独立，微雨燕双飞，想带你去看晴空万里，想大声告诉你我为你着迷！黄昏后偷你的肋骨酿酒，百年后醉的有血有肉！我用时光等你，你不来我不老！"浮烟冷雨，追忆残梦里的一城一池。梦里你一如昔日白衣胜雪，衣袂翩跹，倚剑遥望江山半面。一念繁华一念灰，一念成悦，处处繁华处处锦。一念成执，寸寸相思寸寸灰，一念花开一念花落，这山长水远的人生，终究要自己走下去，宫灯夜明昙华正盛，共饮逍遥一世悠然，一花一世界，一叶一如来，一砂一极乐，一笑一尘埃。

5.实现单行文字两端对齐

姓名

: 林小依

身份证

: 610521202005263542

手机号码

: 18721254215

字体的阴影

字体的阴影

动画属性依次是 ，名称， 持续时间， 速度曲线， 延迟时间， 动画播放计数， 是否反方向播放动画；例如，

123455

文字居中两边带线

猜你喜欢

字体库引入

@font-face { font-family: HYCSJ; src: url(http://resource.diyibox.com/jd/activity/201904/font/汉仪长宋简.ttf), }

6. 页面首页置灰的方法（考虑兼容，一般国家领导去世或者发生大事件会置灰）

webkit内核（chrome和safari浏览器）：

html.o2_gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

7.如何让隐藏滚动条，但是保留滚动效果？（考虑兼容）

webkit内核（chrome和safari浏览器）：

.oh::-webkit-scrollbar {
    display: none;
}

IE浏览器

.oh {
    -ms-overflow-style: none;
}

FireFox浏览器

.oh {
    scrollbar-width: none;
}

8.如何让 chrome 浏览器显示小于 12px 的文字

原谷歌私有属性 -webkit-text-size-adjust : none，现在 -webkit-transform : scale ()

9.弹性盒子布局属性有那些请简述?

Flex-direction: 弹性容器中子元素排列方式 (主轴排列方式)

Flex-wrap: 设置弹性盒子的子元素超出父容器时是否换行

Flex-flow: 是 flex-direction 和flex-wrap 简写形式Align-item:设置弹性盒子元素在侧轴上的对齐方Align-content: 设置行对文Justify-content: 设置弹性盒子元素在主轴上的对齐方式