css炫彩 |css圆形文字环绕

/* 创建渐变背景色，增加层次感 */
#box {
background: linear-gradient(to bottom, #f33, #fc3);
}
/* 设置文本渐变颜色，使之更加炫彩 */
h1 {
background: -webkit-linear-gradient(#f33, #fc3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 创建立体效果的按钮 */
.button {
border: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
line-height: 26px;
margin: 10px;
padding: 10px 20px;
position: relative;
text-transform: uppercase;
}
.button:hover {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
top: 1px;
}
.button:active {
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5);
top: 2px;
}
/* 制作滑动条，带随机颜色 */
input[type="range"] {
background: #ddd;
border-radius: 10px;
-webkit-appearance: none;
width: 80%;
height: 20px;
margin: 20px auto;
}
input[type="range"]::-webkit-slider-thumb {
position: relative;
-webkit-appearance: none;
width: 30px;
height:30px;
background: #f33;
border-radius: 50%;
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.2);
background: randowColor();
}
/* 随机获取颜色 */
function randowColor(){
var color = "#" + Math.floor(Math.random()*16777215).toString(16);
return color;
}

以上是常用的一些CSS炫彩的效果及实现方法，可以根据实际的需求进行相应的改动和调整。