欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > div css问集 >

一些CSS技巧

 分享一些个人工作中所使用的css小知识

目录:

  • 使用currentColor

  • 移动端1px线

  • 文字和icon垂直居中对齐

  • 多行截字显示省略号

  • 使用border写三角箭头

1 使用currentColor

currentColor是css属性值的一个变量,是指“当前元素或者父级元素的文字颜色”,在移动端的兼容性不错,所以在做移动端页面时非常有用,特别是涉及换肤的样式,可以少写很多代码。

<style>

以上代码的效果如下:

这些年我用过的一些CSS技巧(二)

很神奇的有木有,如果你想要背景颜色、伪元素的边框和背景颜色都可以使用currentColor来定义。

2 移动端1px线

有一次设计师拿着重构的手机截图和设计稿对照,发现重构稿边框的线比设计稿的粗了1px,可我明明在样式里面这样写的:

.aa{ border:1px solid #ccc;

表面上看没毛病,但是细想一下的确有问题,因为现在的手机都是二倍以上的屏幕,我们代码里面写1px实际上是2px(或者更多),但是css目前又不支持0.5px之类的写法,所以该怎么办呢?网上找了些资料,发现很多人遇到这样的问题,也找到几种不同的解决方案,这里我就所下本人觉得最靠谱的方案,代码如下:

<style>

这些年我用过的一些CSS技巧(二)

这里把元素的边框不定义在本身,而是定义在自己的伪元素下面,在二倍屏幕下通过媒体查询和缩放达到实现1px边框的目的,而低于2倍的屏幕不受影响。web页面中1px边框在retina屏中的完美展现 这是同事很早之前写的一片文章值的一读。

3 文字和icon垂直居中对齐

QQ音乐的歌曲列表是这样的:

这些年我用过的一些CSS技巧(二)

歌曲名称后面经常会有各种信息的小icon,为了让它和文字垂直居中对齐,我使用过以下方法:

<style>

这些年我用过的一些CSS技巧(二)

我个人在PC端使用的最多的是第2种方式,移动端使用最多的是第4种方式。

4 多行截字显示省略号

之前用样式写文字截取并显示省略号只能做到针对一行的情况,-webkit-line-clamp 是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中,限制在一个块元素显示的文本的行数,我们可以使用这个属性来实现多行截字并显示省略号,代码如下:

<style>

5 使用border写三角箭头

在做页面的时候,经常会遇到有三角箭头的情况,这个我一般都使用CSS来写,而不是使用图片,改起来非常方便,如果要兼容ie6就需要设置边框样式为dashed 和 solid ,如果不需要就直接写solid就行,代码如下:

<style>

效果如下:

这些年我用过的一些CSS技巧(二)

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/wenji/w50655.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-07-11 19:28 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。