CSS-边框-画圆玩

css边框-画图-圆形

上节我们画了三角形,这节我们尝试一点圆嘟嘟的东东

我们直接看图

当然,我们通过相邻边框接壤原则

【夯基石】- CSS-边框-画个三角形玩玩

和css3.0的圆角属性border-radius适当的调整大小会有各种不同的效果出现

简单说一下border-radius的简写属性

border-radius:100px 0 0 100px; 相当于以下四行:

border-top-left-radius: 100px;

border-top-right-radius: 0px;

border-bottom-right-radius: 0px;

border-bottom-left-radius: 100px;

在理解了原理之后,我们就可以画出下面这张图上的四分之一圆

想一想,或许我们适当的调整一下边框宽度和圆角会得到什么效果

可以自己先试一试,然后看下面的图

今天我们简单的通过border-radius画了一些可爱的小玩意儿,下次我们可以看看是不是可以搭配其它属性画出点儿别的东西

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180608G06ONG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券