css画圆教程

目录

• 一、border-radius
• • 1.作用
  • 2.使用语法
• 二、border-color

一、border-radius

1.作用

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

2.使用语法

语法格式：

border-radius: 1-4 length|% / 1-4 length|%;

中间的 “/” 用于分隔四个角的水平半径和垂直半径

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
例如：

border-radius: 50% 50% 50% 50%;

第一个是左上角，第二个是右上角，第三个是右下角，第四个是左下角。

例2：

border-radius: 15% 50% 30%;

第一个适用左上角，第二个适用右上角和左小角，第三个适用右下角
这里没事设置左小角的值，所有它默认的值是和它的对角是相同的，以此类推。

例3：

border-radius: 30% 50% 30% 40% / 30% 60% 40% 50%;

这里的斜杠左边的代表水平半径，右边的代表垂直半径。

上面图形的左上角坐标就是(30%,30%),右上角坐标(50%,60%)，右下角坐标(30%,40%)，左下角坐标(40%,50%)

二、border-color

如何使用border-color画一个弧形的嘴巴?
这里就要用到border-colo属性r的transparent值

主要要用到css中的background-color，border，border-radius，border-color四个属性来实现弧形嘴巴的效果
代码如下：
1.第一步：将div的背景色改成透明，主要看起来就很符合整体背景

.continer{
    height: 100px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0);
    margin: 100px;
}

2.第二步：利用border画出边框

.continer{
    height: 100px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #000;
    margin: 100px;
}

3.第三步：使用border-radius将矩形四个角变成圆形，使它变成圆

.continer{
    height: 100px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #000;
    border-radius: 50%;
    margin: 100px;
}

4.第四步：也是最关键的一步，现在是不是只需要将圆形的上边，左边，右边的线条改成透明效果是不是就可以完成一个微笑的嘴巴了。这里就要用到border-color，将除下面的其余三边的边框颜色改成透明即可。

.continer{
    height: 100px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #000;
    border-radius: 50%;
    border-color: transparent  transparent  #000 transparent;
    margin: 100px;
}

这里border-color的第一个值是上边，第二个值是右边，第三个值是下边（#000就是黑色的颜色代码），第四个值就是左边。

ok啊效果也是实现了，虽然很基础，但是再复杂的图形也是依赖最基础的属性来实现的，学习就是要一步一步来，慢慢学到新知识，经过一顿的消化吸收相信文章前的你也能做出来和大神一般的效果。