css3立体凸标签

CSS3立体凸标签是CSS3中的一个新特性，通过使用CSS3的transform属性和Box-shadow属性，可以给标签制作出立体的凸起效果，让页面元素更加生动、立体。

.tag{
    display:inline-block;
    background-color:#5096b8;
    padding:10px;
    margin:10px;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    text-shadow:1px 1px 0px rgba(0,0.5);
    Box-shadow:0px 3px 0px rgba(0,0.2),0px 10px 5px rgba(0,0.1);
    transform:skew(-10deg);
    transition:all 0.3s ease-out;
}
.tag:hover{
    Box-shadow:0px 6px 0px rgba(0,0.3),0px 20px 10px rgba(0,0.2);
    transform:skew(-10deg) translate(0,-3px);
}

上面的代码是一个简单的CSS3立体凸标签的样式，其中定义了.Box-shadow属性和transform属性以给标签增加立体效果。.tag:hover伪类时，又增加了动态效果，能够使标签在鼠标悬浮时呈现更为立体的视觉效果。

通过在网站中应用这种简单的CSS3立体凸标签样式，可以让页面元素更加立体、生动，提升用户体验，优化用户交互。