CSS:用border来构建图形

转自《css世界》

文章目录

          • border-style:dotted;实现ie8以下的圆角
          • 利用border-top:double和botrer-bottom:solid绘制常见的导航三道杠
          • 优雅的实现一个虚线上传照片的线框
          • border实现倒三角

border-style:dotted;实现ie8以下的圆角

这个属性在浏览器下是一个圆圈的边框;
无论是chrome还是firefox、ie,甚至ie7ie5都支持;
要知道border-radius是从ie9才支持的。
CSS:用border来构建图形_第1张图片
利用这个特点轻松实现一个兼容ie8一下浏览器的圆角图形;
    演示地址:
https://codepen.io/bb798sky/pen/qeKeOX
CSS:用border来构建图形_第2张图片

利用border-top:double和botrer-bottom:solid绘制常见的导航三道杠

    演示地址:
https://codepen.io/bb798sky/pen/rXKXjW
CSS:用border来构建图形_第3张图片

优雅的实现一个虚线上传照片的线框

    演示地址:
https://codepen.io/bb798sky/pen/MNXNEj

CSS:用border来构建图形_第4张图片

border实现倒三角

    演示地址:
https://codepen.io/bb798sky/pen/NQzQyW
CSS:用border来构建图形_第5张图片

你可能感兴趣的:(css)