欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端基础学习笔记 hover border-radius

程序员文章站 2022-04-13 17:42:32
...

hover

鼠标移入元素时 伪类
style:

div{
    width:200px;
    height:200px;
    background-color:pink;
}
鼠标移入效果:
div:hover{
    background-color:red;
    border:1px solid blue
}
p{
    display:none;//一开始消失
    width:100px;
    height:100px;
    background-color:blue;
}

加波浪线鼠标移入出现
div:hover ~p{
    display:block;
}

border-radius

%
宽高一样时50%是圆 不一样时 椭圆
px
px值大于等于宽高一半时 是圆
一个值 四个方向
两个值 左上右下 和 右上左下
三个值 左上 右上左下 右下
四个值 左下 右上 右下 左上

相关标签: 前端 h5