css圆 border-radius 三角 z-index 实现时钟动画

这篇博客介绍了如何使用CSS3的border-radius属性来绘制圆角，通过不同参数设置理解其效果。同时讲解了如何利用border-radius创建三角形，并探讨了z-index的层叠规则。文章最后展示了如何结合这些技巧实现一个时钟动画，重点在于transform-origin和关键帧动画的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3制作图形大全 https://www.jqhtml.com/8045.html

border-radius

https://www.cnblogs.com/happymental/p/7891725.html

border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四个值，length和%指的是值的单位。

border-radius的数值有三种表示方法：px、%、em .

参数：

四个参数：顺时针方向，上左，上右，下右，下左

三个参数的时候，是上左，上右和下左，下右

两个参数的时候，是上左和下右，上右和下左（对角线相等）

一个参数：给元素的四个边角设置统一的圆角弧度

这里的border-radius大小如何理解呢？

1. 如果设置它的border-radius的值为30px，那么实际呈现的圆角，其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度，那么当大小等于border大小的时候就是刚好一个半圆形状了。

第二个图相比第一个图，不只边角的圆润程度变缓，而且content范围变小，被那个同色的扇形覆盖了。很好的解释了边框圆角就相当于一个同色的1/4圆抵在了角上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>feng</title>
    <style>
        .radius{
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 50px solid #fe626d;
            border-radius: 50px;
        }.radius2{
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 50px solid #fe626d;
            border-radius: 60px;
        }
    </style>
</head>
<body id="body">
<div id="curvedarrow"></div>
<div class="radius"></div>
<div class="radius2"></div>
</body>
</html>

2. 当设置为百分比时，如果对象的宽和高是一样的，那判断方法与第一点一致，只不过想象的时候，需要将对象宽高乘以百分数换算一下；如果宽高不一致，那就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。

他们的宽高都是200px,10px。border-radius分别是50px,50%,10%

3.百分比以元素盒子整体大小为参照

计算时 border-radius的大小 = （content+padding+border）/ 2

上面我们讨论的border-radius都是相对于元素的content本身，而非加上boeder，padding的时候。如图，元素本身宽高100px，border-radius: 50px;是一个正圆。在给他加上边框后，出现了问题，因为上面说他的边角是抵在边缘上的，右上角是一个半径50px的圆，宽高120px,自然不圆了，因此border-radius应该是60px，是元素（包括边框边距）整体大小的百分比。

/ 如何理解

“/” 前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径

例如： border-radius:10px 20px 30px 40px/40px 30px 20px 10px

CSS画圆

一个div，弯曲边框的四个角，当 border-radius:50%;  就是一个正圆了

我们现在把圆边框宽度增大，并且设定上下左右边框颜色：

每一个不同边框是如下效果：

最后一个是2*1/4的边框，利用transform: rotate(45deg);即可得到竖直的半圆了

.borderTwo{
    display: inline-block;
    vertical-align: middle;
    width:160px;
    height:160px;
    border-radius: 50%;
    border: 20px solid transparent;
    border-top-color: #a3d48e;
    border-right-color: #fe626d;
    transform: rotate(45deg);
}

月牙天冲:（在没有设置整体border，单独设置了部分边的border时，它会是下面的形状）

很多时候我们可以利用第一个月牙的图形来制作一个旋转的进度条

.crescent{
    display: inline-block;
    vertical-align: middle;
    width:160px;
    height:160px;
    border-radius: 50%;
    border-top:20px solid #a3d48e;
}

画三角

假设我们不用border-radius:50%;可以看到，一条边框是一个长方形，但是多条的时候，边框的四个角落不是空缺的四个小方块，而是边框看起来更长，而且变成了一个梯形。那么我们可以想到当宽度为0时，它的边框就是四个三角。

.test{
            display: inline-block;
            vertical-align: middle;
            width:0px;
            height:0px;
            border:20px solid transparent;
            border-bottom-color: #00BCD4;
            margin-left: 20px;
        }

z-index

并不是数值设置越大，就一定层级越高，要看他们的父级层叠顺序谁高

https://blog.youkuaiyun.com/lhjuejiang/article/details/80924792

应用：画时钟

自己做的一个时钟（其中用到了几点）：

实现旋转用keyframes

@keyframes secondHand {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

transform-origin 改变一个元素变形的原点（这样时针就是绕着他自身的底部也就是钟表中心旋转了） https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
animation: secondHand 60s steps(60) infinite; 表示将60秒的动画分成60步执行

时钟代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>三列固定宽度布局</title>
    <style type="text/css">
        .wheel {
            position: relative;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            margin: 100px auto auto; /*三参数：上，左右，下 */
        }

        .line {
            width: 200px;
            height: 6px;
            background-color: darkgrey; /*这里不用border，边框会使图形镂空，背景女色刚好可以充当填充效果*/
            position: absolute; /*不能用相对定位,显示出来会偏一点点*/
            top: 50%;
            margin-top: -3px;
        }

        .two {
            transform: rotate(30deg);
        }

        .three {
            transform: rotate(60deg);
        }

        .four {
            transform: rotate(90deg);
        }

        .five {
            transform: rotate(120deg);
        }

        .six {
            transform: rotate(150deg);
        }

        .smallWheel {
            position: absolute;
            width: 80%;
            height: 80%;
            background-color: white;
            border-radius: 50%;
            margin: auto;
            top: 10%;
            left: 10%;
        }

        .centerPoint {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            z-index: 4;
        }

        .hourHand {
            position: absolute;
            width: 10px;
            height: 40px;
            background-color: black;
            left: 50%;
            margin-left: -5px;
            top: calc(50% - 40px);
            z-index: 1;
            transform-origin: bottom; /*作用是改变一个元素变形的原点*/
            animation: secondHand 43200s infinite;
        }

        .minuteHand {
            position: absolute;
            width: 8px;
            height: 70px;
            background-color: black;
            left: 50%;
            margin-left: -4px;
            top: calc(50% - 70px);
            z-index: 2;
            transform-origin: bottom;
            animation: secondHand 3600s infinite;
        }

        .secondHand {
            position: absolute;
            width: 2px;
            height: 90px;
            background-color: red;
            left: 50%;
            margin-left: -1px;
            top: calc(50% - 90px);
            z-index: 3;
            transform-origin: bottom;
            /*animation: secondHand 60s infinite;*/
            animation: secondHand 60s steps(60) infinite;
        }
        @keyframes secondHand {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="wheel">
    <div class="line"></div>
    <div class="line two"></div>
    <div class="line three"></div>
    <div class="line four"></div>
    <div class="line five"></div>
    <div class="line six"></div>
    <div class="smallWheel"></div>
    <div class="centerPoint"></div>
    <div class="hourHand"></div>
    <div class="minuteHand"></div>
    <div class="secondHand"></div>
</div>
</body>
</html>