css3错误提示动画 |css设置下拉框三角样式

.error{
display:block;
position:relative;
border:1px solid #f00;
padding:10px;
margin:10px;
background-color:#f9c9c9;
color:#f00;
}
.error:before{
content:'';
display:block;
position:absolute;
border-width:0 8px 8px 0;
border-style:solid;
border-color:#f00 transparent transparent transparent;
left:10px;
bottom:-8px;
}

以上代码首先定义了一个.error类，用来显示错误信息。其中，display:block表示将显示为块级元素，position:relative使元素的位置相对于其正常位置偏移，border:1px solid #f00设置了1像素的边框，padding:10px表示内边距为10像素，margin:10px表示外边距也为10像素，background-color:#f9c9c9设置了背景色，color:#f00设置了文字颜色为红色。

接下来，使用伪类:before来添加一个红色的三角形，用以指示错误的位置。首先，content:”表示在元素之前添加内容，在这里是一个空字符串。display:block表示将元素显示为块级元素，position:absolute使元素的位置相对于其最近的已定位祖先元素（非 static）偏移，border-width:0 8px 8px 0表示边框的各个位置，border-style:solid表示边框样式为实线，border-color:#f00 transparent transparent transparent设置了边框颜色为红色，其他三个角设置为透明，left:10px使其距离左侧边框10像素，bottom:-8px使其距离底部边框8像素。

以上代码实现了CSS3错误提示动画效果，通过这种方式，大家可以使错误提示信息更加优美和友好。