css3+画标签（css3标签属性大全）

CSS3是目前前端开发中最常用的样式语言之一，它可以实现各种炫酷的效果。下面我们来谈一谈如何使用CSS3画标签。

div class="tag">
    CSS3/div>
.tag {
    display: inline-block;
    padding: 5px 10px;
    background-color: green;
    color: #fff;
    border-radius: 5px;
}
    

上面是一个简单的CSS3标签样式，可以通过改变背景色、字体颜色、圆角大小等来设计更多样式的标签。但是，这个标签还可以通过CSS3的伪类来实现更加酷炫的效果。

div class="tag2">
    HTML5/div>
.tag2 {
    display: inline-block;
    padding: 5px 10px;
    background-color: blue;
    color: #fff;
    border-radius: 5px;
}
.tag2:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid blue;
    transform: rotate(180deg);
}
.tag2:after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid blue;
}
    

上面是一个带箭头的标签样式，它使用了:before和:after伪类来分别画出斜向的三角形，并通过transform属性实现了箭头朝上的效果。

通过CSS3的各种技巧和样式效果，我们可以轻易地实现各种形态的标签，为页面增加视觉效果和美感。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！