css3 h5 弧形文字 |控制图片模糊程度css

示例代码：
/* 声明一个类名为circleText的样式 */
.circleText {
display: inline-block; /* 将其作为行内元素 */
position: relative; /* 绝对定位的弧形文字需要有父元素作为定位参照物 */
transform: rotate(-90deg); /* 将其旋转90度，使其弧形排列 */
}
/* 这里使用CSS3的transform-origin属性，即变换原点来设置顺时针方向居中 */
.circleText::before {
display: block;
content: ''; /* 伪元素不需要文本内容 */
position: absolute;
left: 50%; /* 左边距50%居中 */
top: 0;
width: 0;
height: 100%;
border-radius: 50%; /* 将其设置为圆形 */
border: 1px solid transparent; /* 边框颜色设为透明，以免影响弧形排列 */
transform-origin: bottom right; /* 以底部-右侧为变换原点 */
transform: translateX(-50%) rotate(0deg); /* 转移50%水平偏移量，同时旋转0度 */
}
/* 以下是设置文字颜色，大小等微调内容 */
.circleText.black::before {
background-color: #000;
}
.circleText.white::before {
background-color: #fff;
}
.circleText.gray::before {
background-color: #ccc;
}
.circleText.small::before {
font-size: 12px;
line-height: 16px;
}
.circleText.middle::before {
font-size: 16px;
line-height: 20px;
}
.circleText.large::before {
font-size: 22px;
line-height: 26px;
}

上面的代码中，大家定义了一个CSS样式类.circleText和伪元素的样式属性，在实际使用中，可以通过修改不同的类名，来实现不同的弧形文本效果，例如：黑色文本、白色文本、灰色文本，以及小、中、大的文本大小。