用 css 做web图形化处理-阿里云开发者社区

开发者社区> 开发与运维> 正文

用 css 做web图形化处理

简介: 图片来自 CHRIS COYIER 在前端开发中,你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容,为的就是更加熟悉了解它们,以便更好的使用它们。
img_b77a9f01248f2c125ae37fb845845b7f.jpe
图片来自 CHRIS COYIER

在前端开发中,你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容,为的就是更加熟悉了解它们,以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate

这里说的用css做图形,其实是使用一个html元素,结合它的伪元素 ::before & ::after (不需要其他额外的非伪元素的html元素),然后定义样式来生成所需的图形。

这里不是说不可以使用其它的html元素,只是这样的好处是在html方便引入,而不需要每次引入都需要添加大量的html片段(夸张说法)。

主要方法

可以使用的样式属性如下:

* border
* border-radius
* transform
* box-shadow

为了兼容性,使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。

当然,在前端我们经常使用的时svg和font-icon。

还用一种是css3的shape-outside实现文本环绕的效果。

这种单元素的css图形还是比较实用的。

图形分类

  1. 几何图形。如:三角形,正方形,矩形,平行四边形,五边形,六边形等
  2. 星形
  3. 卡通图形。如:吃豆人等
  4. 图标。 如:心形,箭头,锁,放大镜等。

具体的图形列表和代码可参考github

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章