前端设计一个固定位于右下角的圆形按钮
可以使用CSS中的position属性和border-radius属性来设计一个固定位于右下角的圆形按钮。
HTML代码:
<div class="circle-btn"></div>
CSS代码:
.circle-btn {
width: 50px;
height: 50px;
background-color: #007bff;
border-radius: 50%;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
}
解释:
- width和height属性设置圆形按钮的宽度和高度为50px。
- background-color属性设置圆形按钮的背景颜色为蓝色。
- border-radius属性设置圆形按钮的圆角半径为50%。
- position属性设置圆形按钮的定位方式为fixed,即固定在浏览器窗口中。
- bottom和right属性设置圆形按钮距离浏览器窗口底部和右侧的距离为20px。
- cursor属性设置鼠标在圆形按钮上的样式为手型。
原文地址: https://www.cveoy.top/t/topic/bnSw 著作权归作者所有。请勿转载和采集!