css 异型边框 |css球体3d旋转

1. 使用边框图片

div {
border: 10px solid;
border-image: url(border.png) 30 30 round;
}

上面的代码表示在 div 元素的边框中使用了一个图片，图片以圆角的方式平铺在边框中。其中，border-image 的参数值分别表示图片的 URL、图像区域与边界的偏移量、和边界模式。

2. 使用 clip-path 属性

div {
clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
background-color: #fff;
border: solid 10px #000;
}

上面的代码表示在 div 元素中使用 clip-path 属性定义了一个多边形形状，然后在其上添加了一条边框。clip-path 支持多种图形，例如圆形、矩形、梯形、星形等。

3. 使用 border-radius 属性

div {
border: 10px solid;
border-radius: 50%;
}

上面的代码表示在 div 元素的边框上使用了圆角半径为 50% 的值。border-radius 还可以实现其它的形状边框，例如椭圆形、斜角矩形、三角形等。

4. 使用伪元素和 transform 属性

div::before {
content: "";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-style: solid;
border-width: 10px;
transform: rotate(45deg);
}

上面的代码表示使用伪元素的 border-style 和 border-width 属性定义了一个正方形形状，然后利用 transform 属性将其旋转成菱形形状并加上一个边框。这种方式可以实现多种异型边框，例如三维棱柱形、扇形、阴影等。