码云笔记前端博客

仅使用CSS实现带有“显示更多”按钮的多行截断文本

前几天,在办公室的讨论中出现了截断的文字,我想知道CSS是否能够实现该功能,能够正确地截断文本,即支持以下内容: 多行 “显示更多”按钮,点击时展开文本 text-overflow: ellipsis不支持多行,但...

阅读全文

2019年09月05日 61℃ 0条评论 5喜欢

用Sass创建一个可维护的图标系统

我最喜欢的向网站添加图标的方法之一是将它们作为数据URL背景图像包含::after在我的CSS中的伪元素(例如)中。该技术具有以下几个优点: 除CSS文件外,它们不需要任何其他HTTP请求。 使用该backgroun...

阅读全文

2019年09月03日 49℃ 0条评论 7喜欢

CSS3 SVG clip-path路径剪裁属性简介

clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍clip-path的: clip-path属性可以防止部分...

阅读全文

2019年08月28日 79℃ 0条评论 10喜欢

深入理解css行高line-height及其应用

行高的定义与图解 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就...

阅读全文

2019年08月27日 81℃ 0条评论 8喜欢

CSS伪元素有哪些?伪元素的妙用技巧

什么是伪元素? 「伪元素」之所以称作「伪」,除了英文从「Pseudo」翻译过来之外,就是因为它并不是真正网页里的元素,但行为与表现又和真正网页元素一样,也可以对其使用CSS操控。 跟伪元素类似的还...

阅读全文

2019年08月22日 96℃ 0条评论 12喜欢

常用的CSS 字体单位:px、em、rem 和 % 看这篇就够了

对于绘图和印刷而言,「单位」相当重要的,然而在网页排版里,单位也是同样具有重要性,在CSS3 普及以来,更添加了一些方便好用的单位( em、rem.. .等),这篇文章将整理这些常用的CSS 单位,希望能够...

阅读全文

2019年08月20日 160℃ 0条评论 6喜欢

详解CSS3 3D的perspective属性

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变...

阅读全文

2019年08月12日 258℃ 0条评论 8喜欢

css世界笔记整理 带你深入了解css本质

本文内容来自个人学习张鑫旭老师的《css世界》整理的笔记,为缩减篇幅丢弃了张老师冗余的小幽默,丢掉了些含金量较低的章节内容,因为ie已经被淘汰出局,所以有关css兼容性的地方也全部忽略不记,同时...

阅读全文

2019年08月07日 870℃ 6条评论 22喜欢

CSS中值得收藏的七种垂直居中方法

今天我们一起来梳理下CSS垂直居中的几种方法,我们在布局一个页面时,通常都会用到水平居中和垂直居中,处理水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉...

阅读全文

2019年08月05日 334℃ 0条评论 6喜欢

CSS否定伪类:not()的正确认识

概述 CSS否定伪类,:not(X),是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。 :not伪类的优先级即为它参数选择器的优先级。:not伪...

阅读全文

2019年08月02日 306℃ 0条评论 6喜欢

图片布局的最全实现方式总结

最近项目中需要处理与图片相关的布局,不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果,你就需要找到适合的方...

阅读全文

2019年07月24日 456℃ 0条评论 5喜欢

教你几招CSS小技巧 让开发更高效

俗话说「人靠衣装马靠鞍」,一个网页的漂亮与否CSS起到了很大的作用。它能够帮助我们进行美化。因此CSS在前端开发中的地位不用多说。 很多人认为CSS的入门门槛较低,所以认真对待和学习的人其实并不多...

阅读全文

2019年07月17日 429℃ 0条评论 5喜欢

干货分享css滤镜与混合模式

加载中。。。

现在是2019年了,00后都快20岁了,5G都已经来了,很多人思维还停留在几年前,以为新CSS特性都用不了,实际上不是的,现代浏览器的版本更新和迭代是非常迅速的。 比方说这个滤镜,2013年就开始支持所以...

阅读全文

2019年06月14日 2275℃ 2条评论 2喜欢

纯CSS技术实现Scroll Indicator滚动指示器效果

加载中。。。

最近在读阮一峰老师的的《ECMAScript 6入门》,发现每个章节的页面顶部都有一个类似进度条的东西,这是个什么东东,好奇心强的我上网查了一下,这个东西叫Scroll Indicator。 Scroll Indicator:滚动指...

阅读全文

2019年06月14日 3078℃ 0条评论 1喜欢

CSS新出的列选择符双管道(||) 你知道吗?

加载中。。。

最近手头活不忙,终于闲下来可以提升一下自己了,发现了一个css新出的属性之列选择符双管道(||),平时我们用过空格,>,+和~,现在出来个双管道||,是不是没见过,这个双管道||就是本文要介绍的...

阅读全文

2019年06月06日 4566℃ 0条评论 2喜欢

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论