html图片滚动红点_HTML+CSS入门 CSS头像右上角的红点

本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

说明：

1、主要用到position定位；

2、使用border-radius画圆角；

源码：

html>

test

.info {

background: rgba(45,171,219,.9);

position:relative;/*设置子元素相对定位*/

color: white;

text-align: center;

width:40px;

height:40px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius:50%;

display:inline-block;

}

.info:hover{

cursor: pointer;

background: rgba(45,171,219,.6);

}

.info-tip{

background:rgba(250,60,0,1);

position:absolute;/*根据父元素绝对定位*/

width:10px;

height:10px;

top:0;/*在父元素的内部的顶部*/

right:0;/*在父元素的内部的右边*/

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius:50%;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！