今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle(圆形) #ci…
#rectangle { width: 200px; height: 100px; background: red; } #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* 可以使用百分比值(大于50%),但是低版本的Android不支持 */ #oval { width: 2…
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square {    width: 100px;    height: 100px;    background: red; } Rectangle(矩形) #rectangle {    width: 200px;    height: 100px;    background: red…
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; back…
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle(圆形) #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-bord…
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css常见的8种选择器</title> </head> <style> /*1.通用选择器 匹配页面上任何一个元素 语法 *{} * */ *{ color:darkred; font-size: 23px; color: blue; } /*2.元素选择器 也叫标签选择器…
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle(圆形) #ci…
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技巧,同时要结合before.after伪元素和定位做出一些效果. Triangle Up(向上的三角形) #triangle-up{ 2 width: 0; height:0; border-left:50px solid transparent; border-right: 50px solid…
转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器. [css] view plain copy   .Center-Container { position: relative; } .Absolute-Center { width: 50%; height:…
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍默.玛琦.巴特.莉萨和玛吉一家五口生活的描绘,用搞笑的方式自我嘲讽了美国的文化.社会.电视以及人类境况的诸多方面. 温馨提示:为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载      在线演示 Homer 辛普森一家中的父亲,一人养着全家.全名是 Hom…