前言
伴随着 CSS3(CSS Module 3)的发布,我们设计网页时有了更多的选择。对于一些比较简单的小图标和图片,我们可以利用 CSS3 很方便的进行绘制,从而减少页面的图片数量和HTTP请求次数,加快网页的访问速度。
今天我们主要利用 CSS3 的几个属性,简单的绘制一个如下图所示的操场:
![76d915092f612280a698e15e3e54ed64.png](https://i-blog.csdnimg.cn/blog_migrate/f008cfdb2bdbb454d615712aa39d9462.png)
其中用到的核心属性为:
border-radius
box-shadow
before
和after
伪元素
border-radius
属性是用来为元素添加圆角边框的。其用法如下:
border-radius: 1-4 length|% / 1-4 length|%;
“/”前面的值表示水平方向的半径,“/”后面的值表示竖直方向的半径。若省略,则水平方向与竖直方向半径相等。下面是其典型应用场景:绘制圆形。
div{
width: 50px;
height: 50px;
border-radius:50%;
border:1px solid;
}
绘制效果如下所示&