CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案在之前的文章中有讲解过,如何通过CSS代码实现类似于杯子和心形的图案,今天这篇文章我们继续来看看两个复杂的图案。

欢迎大家来到IT世界,在知识的湖畔探索吧!

前言

在之前的文章中有讲解过,如何通过CSS代码实现类似于杯子和心形的图案,今天这篇文章我们继续来看看两个复杂的图案。

文章中的代码已经放到github上了,感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

CSS3

相机

首先我们来看看相机的实现效果。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

效果图

然后我们再一步步分析如何实现这个效果。

同样我们需要对整个图案进行拆分,主要分为三个部分。

  • 相机的主体部分,背景色为黑色。

  • 右上角的白色背景小方框。

  • 中间的几个黑白相间的圆环。

相机主体

相机主体部分就是一个div,完全通过border属性设置,因此需要保证其width: 0。

由于主体部分需要呈现为长方形,所以border的左右两个方向要比上下两个方向值大,border在不设置颜色的情况下默认为黑色。

最后设置border-radius值,让其四个角呈现为圆角。

最终得到的相机主体部分CSS属性如下。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

相机主体CSS属性

右上角长方形

相机的右上角有个小的长方形,我们通过:after伪元素实现。

  • 将其位置设置为绝对定位position: absolute。

  • 设置top和left两个方向的偏移量。

  • 设置一个宽度但是高度值为0,通过border-top让其显示为一个长方形,border的颜色设置为白色。

  • 伪元素的content: ”

通过以上的分析我们得到以下的CSS代码。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

右上角CSS代码

中间的圆环

大家都很容易想到中间的圆环肯定是通过伪元素:before来实现了。

  • 将其位置定义为绝对定位position: absolute。

  • 设置top和left两个方向的偏移量。

  • 由于这里有圆环,我们设置其内容的高度和宽度。

  • 因为是圆形,border-radius设置为50%

  • 设置border值,使其背景色为白色。

通过以上的分析我们得到如下的CSS代码。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

CSS代码

运行上述的代码后我们却发现得到的图案是这样的。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

运行后的图案

是不是觉得少了点什么?

对,中间的圆形少了一个环,那么我们该怎么补充上这个环呢?

这里我们可以使用神奇的box-shadow属性。

box-shadow属性主要是用来给元素周围添加阴影效果的,它的基本用法大家可以看看CSS3的文档。

box-shadow接收的第三个参数表示的是阴影模糊的半径,如果其值为0,则表示不具有模糊效果,本例子中因为要在圆形外面再增加一个圆形图案,就需要将其值设置为0。

还有很重要的一点就是:可以给box-shadow设置多组值,任意一个相同的属性,后面定义的值都会兼容前面的值,并不会覆盖掉。

所以同心圆就只需要将box-shadow设置为两组值即可,外层与内层颜色不同。

最终得到的中间圆环CSS属性如下所示。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

CSS代码

运行上述代码后就可以得到文字一开始的相机图案了。

月亮

接下来我们再看一个通过box-shadow可以很容实现的月亮图案。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

月亮图案

乍一看这个图案没有那么容易实现,其实熟悉border-radius和box-shadow属性的同学可以很容易想到,这个图案实现的核心就是利用box-shadow设置右侧阴影。

然后设置rotate值使其旋转一定的角度。

通过以上的分析可以得到以下的代码。

CSS3中神奇的box-shadow属性,助你制作几个复杂的图案

月亮的CSS代码

运行上述代码即可得到月亮图案。

结束语

今天这篇文章通过CSS属性实现了相机和月亮两个图案,再结合前几篇文章中实现的杯子和心形图案,相信大家对CSS的神奇之处有所折服吧。

大家也赶紧动手自己实现一些常用的图案吧。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/35203.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信