zoukankan      html  css  js  c++  java
  • 简单谈谈自己对htm与css中画圆的理解。

          近几天,在利用css编辑中,发现不少边框图像要求是矩形圆角或者直接画一个圆的例子,下面和大家一起分享下对画圆的看法。

         在这次的分享中,我侧重给大家看一些例子来更好的理解,

         我们都明白,画圆时要用到“border-radius:”,而且在每次画圆时,我们都应该先设定一个width和height。

        那么我们可以这样理解,

         我们的圆是在一个矩形(正方形)中进行裁剪的,而border-radius就是我们要裁剪的尺寸。

         给大家一些图片,更好的去理解。

        首先,我们设定一个width为100px,高度为100px的正方形,设置为红色背景,如下

         接下来,我们在后面添加

         border-radius:50px 0 0 0;效果如下:

         border-radius:50px 50px 0 0;效果如下:

         border-radius:50px 50px 50px 0;效果如下:

         border-radius:50px 50px 50px 50px;效果如下:

         通过上述一步一步添加代码,图片一步一步的改变,我理解出如下:

         border-radius:0 0 0 0;

         四个值中,第一个值为矩形左上角的圆形半径(1/4的圆);

                       第二个值为矩形右上角的圆形半径(1/4的圆);

                       第三个值为矩形右下角的圆形半径(1/4的圆);

                       第四个值为矩形左下角的圆形半径(1/4的圆);

         并且,他们是在矩形的边界上进行半径取值,再确定圆心的(这就可以完成矩形圆角,通过改变半径来实现。)

         以上就是我对border-radius的理解,有哪些不对的地方,欢迎大家评点。

  • 相关阅读:
    TDD
    算法与数据结构 文档 1 洋洋洋传
    编程的专精度
    python小课
    有时心情舒畅时打个代码心里都是默默地同步输出...
    同时可以运行在JVM上的Kotlin~枚举和判定以及数据对象的写法总结
    map
    multiset
    set
    priority_queue
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5335215.html
Copyright © 2011-2022 走看看