css圆的部分边框加粗 |css树叶掉落效果

.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: pink;
}

上述代码可创建一个简单的粉色圆形。想要让圆形元素的部分边框加粗，大家可以使用伪类（:before 或 :after）与 border-radius 属性结合使用。

.circle-with-border {
position: relative;
border-radius: 50%;
width: 100px;
height: 100px;
border: 2px solid pink;
background-color: white;
}
.circle-with-border:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: inherit;
border: 5px solid pink;
}

以上代码会创建一个白色圆形，边框为粉色，部分边框加粗效果。其中，.circle-with-border:before 会创建一个绝对定位的伪元素，该元素的边框是复制了父元素的圆角属性（border-radius: inherit），并且宽度使用 right、bottom、left、top 控制，从而形成加粗效果。

再来一个部分边框加粗的例子：

.circle-with-border-2 {
position: relative;
border-radius: 50%;
width: 100px;
height: 100px;
border-bottom: 3px solid pink;
background-color: white;
}
.circle-with-border-2:before {
content: '';
position: absolute;
top: -3px;
left: 0;
right: 0;
height: 6px;
border: 3px solid pink;
border-radius: 50%;
}

上面这段代码会创建一个白色的圆形，只有底部边框加粗并为粉色。.circle-with-border-2:before 会创建一个占据整个圆形底部的伪元素，高度为 6px（底部边框的厚度）。

总之，CSS 中使用 border-radius 属性和伪类可以轻松创建圆形元素以及部分边框加粗的效果，这对于 UI 设计和页面制作都有一定的帮助。