样式
.Tooltip {
position: absolute;
z-index:999;
width:200px;
height:57px;
padding:20px;
font-family: "Comic Sans MS",cursive;
font-weight:bold;
font-size:14px;
color:rgba(21,139,204,1);
text-align:justify;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
Box-shadow: inset 0px 0px 5px 1px rgba(21,1);
-webkit-Box-shadow: inset 0px 0px 5px 1px rgba(21,1);
-moz-Box-shadow: inset 0px 0px 5px 1px rgba(21,1);
background:#dbf3ff;
}
.Tooltip .ArrowWrap {
position:absolute;
margin-top:77px;
margin-left:81px;
height:18px;
width:37px;
overflow:hidden;
}
.Tooltip .ArrowWrap .ArrowInner {
width:25px;
height:25px;
margin:-13px 0 0 6px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome,Safari,Opera */
Box-shadow: inset 0px 0px 5px 1px rgba(21,1);
background:#dbf3ff;
}
说明
最佳答案
其他方法有框阴影和伪元素:
div{
position:relative;
width:200px;
height:57px;
padding:20px;
border-radius:10px;
background:#DBF3FF;
Box-shadow: inset 0px 0px 5px 1px rgba(21,1);
}
div:after{
content:'';
position:absolute;
left:110px; bottom:-10px;
width:20px; height:20px;
background:inherit;
transform:rotate(45deg);
Box-shadow: inset -5px -5px 5px -4px rgba(21,1);
}
另请注意:除非您对浏览器支持有非常具体的需求,否则box-shadows和border-radius不需要使用供应商前缀.
原文地址:https://www.jb51.cc/html/426875.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。