用CSS绘制简单图形

2021-06-06 16:04

阅读:636

标签:设置   宽度   trick   矩形   使用   css   nbsp   order   example   

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

 

用CSS绘制简单图形

标签:设置   宽度   trick   矩形   使用   css   nbsp   order   example   

原文地址:http://www.cnblogs.com/a-distant-bright-star/p/7337305.html


评论


亲,登录后才可以留言!