java怎么将标签弄成圆形,如何用css制作圆形标签？

这是纯CSS的概念验证示例.它使用伪元素和旋转.它与你的源图像非常接近,可以通过一些工作更接近.

HTML：

• Sample 1
• Sample 2
• Sample 3
• Sample 4

CSS：

/* Reset ul styles */

body { font-family: sans-serif; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

ul {

padding-left: 20px;

z-index: 5;

}

ul li {

color: grey;

background: #fefefe;

padding: 14px 24px 10px;

margin: 0px -6px 0 10px;

position: relative;

float: left;

text-align: center;

z-index: 1;

}

ul li::before {

content: '';

display: block;

position: absolute;

top: 0; left: 0;

width: 70%;

height: 100%;

border-style: solid;

border-color: #eee;

border-width: 2px 0 2px 2px;

border-radius: 8px 0 0 0;

-webkit-transform: skewX(-20deg);

-moz-transform: skewX(-20deg);

-o-transform: skewX(-20deg);

transform: skewX(-20deg);

background-color: inherit;

z-index: -1;

}

ul li::after {

content: '';

display: block;

position: absolute;

top: 0; right: 0;

width: 70%;

height: 100%;

border-style: solid;

border-color: #eee;

border-width: 2px 2px 2px 0;

border-radius: 0 8px 0 0;

-webkit-transform: skewX(20deg);

-moz-transform: skewX(20deg);

-o-transform: skewX(20deg);

transform: skewX(20deg);

background-color: inherit;

z-index: -1;

}

ul li.active {

color: orange;

z-index: 10;

}

ul li.active::before,ul li.active::after {

background-color: #fff;

border-bottom-color: #fff;

}

ul li:not([class='active']):hover::before,ul li:not([class='active']):hover::after {

background-color: #efefef;

}