你的位置:首页 > 软件开发 > 网页设计 > CSS3新特性,绘制常见图形

CSS3新特性,绘制常见图形

发布时间:2016-11-17 01:00:04
前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等。以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形。在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成 ...

前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等。以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形。

在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的。

a)伪元素:用来在内容元素的前后插入额外的元素,之所以叫伪元素,就是它们根本就不在文档中生成,只能在外部可见,比如:你F12时,在右边代码框中是不是可以看到?

这里用到的两个伪元素  ①元素之前:before  ②元素之后:after

1)圆,没必要了,我们看看三角形

/* CSS */.sanjiao {    width: 0px;    height: 0px;    margin: 30px auto;    position: relative;    border: 100px solid transparent;    border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/    /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */    border-right: 100px solid #5E5E5E;    border-top: 100px solid #3C98D1;*/  }/* HTML */<div class="sanjiao"></div>

原标题:CSS3新特性,绘制常见图形

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。