css+圆形边框内有加号
时间: 2023-11-12 10:06:33 浏览: 115
可以使用CSS3的伪元素和transform属性来实现圆形边框内加号的效果。具体实现方法如下:
```
.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #000;
}
.circle::before,
.circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 2px;
background-color: #000;
}
.circle::before {
transform: translate(-50%, -50%);
}
.circle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
```
以上代码中,通过设置圆形的宽高和边框样式,使用伪元素before和after来实现加号的效果,通过transform属性来调整加号的位置和旋转角度。
阅读全文