用CSS绘制简单图形
2021-06-06 16:04
标签:设置 宽度 trick 矩形 使用 css nbsp order example 这里有篇文章, https://css-tricks.com/examples/ShapesOfCSS/ ,介绍了如何用只用1个元素和CSS规则绘制各种常见的图形: 从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。 用CSS绘制简单图形 标签:设置 宽度 trick 矩形 使用 css nbsp order example 原文地址:http://www.cnblogs.com/a-distant-bright-star/p/7337305.html
这种绘图方式主要用到了两类技巧: 一是使用伪元素, 二是设置图形的边框。
特别是边框的使用,非常巧妙。从这些例子中可以发现:当元素的宽、高设置为0时,浏览器仍然会渲染元素的边框(即便box-sizing设置为了border-box,这时实际的宽/高会是边框的厚度之和),巧妙设置4条边框的宽度,就可以做出很多奇妙的效果。
下一篇:HTML常用操作