CSS阴影效果的比较:drop-Shadow与box-Shadow

2019-05-23
阅读 4 分钟
5.8k
drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法:

运用clip-path的纯CSS形状变换

2019-04-19
阅读 4 分钟
9.3k
在之前所提到绘制正多边形的方法,算是纯粹利用伪元素来完成,不过坦白说还有另外一种方法,可以将单一div做更多形状的变换,这种方法就是CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,...

CSS技巧之'text-justify'

2019-04-19
阅读 2 分钟
1.9k
CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。

CSS 实现三角形,非 Hack

2019-04-18
阅读 2 分钟
1.5k
写过 HTML upvote arrow(向上箭头),speech bubble(对话气泡)或其他类似的尖角元素的人都知道,为了创建一个纯 CSS 实现的三角形,必须使用某些 Hack。最流行的两种方式是通过 边框实现,或 Unicode 字符。

玩转CSS 3D -正八面体与正十二面体

2019-04-18
阅读 8 分钟
4.4k
正八面体与正十二面体,这两个正多面体虽然组合的面比较多,不过因为具备了对称性,所以只需要制作出一半的结构,另外一半再用反转的方式接在一起即可。

Flexbox 很棒,但有些情况不适用

2019-04-17
阅读 2 分钟
1.2k
对大部分的人来说(如果你写过CSS),Flexbox 可以说是完美,但它是否适合所有场景呢? 简而言之,我会给出几种可用的场景,需要你重新思考 Flexbox 模型的使用。 顺便说一句,本人是 Flexbox 的忠实粉丝,曾写过一篇 Flexbox 详解 ,可以算得上最全面的文章了。 当然,我们应该了解该如何使用 Flexbox,哪些情况不应该...

Vertical-Align,你应该知道的一切

2019-04-17
阅读 8 分钟
1.1k
好,我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上,verticle-algin可以在不同上下文中灵活地对齐元素,以及进行细粒度的控制,不必知道元素的大小。元素仍然在文档流中,因而其他元素可以根据它们大小的变化进行相应的调整。一个有用的例子就是居中图标与旁边的文本。

css伪元素(before与after)

2019-04-17
阅读 3 分钟
6k
最近因为一些网页的需要,比较深入的使用了CSS的“伪元素”(Pseudo Element),发现原来不只是用用before或after而已,可以玩的东西还真是不少,所以就来篇文章,把这些比较不常玩的用法纪录一下。

一次搞懂CSS字体单位:px、em、rem和%

2019-04-17
阅读 5 分钟
3.4k
对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。