1. 程式人生 > >前端基礎學習筆記 hover border-radius

前端基礎學習筆記 hover border-radius

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值大於等於寬高一半時 是圓
一個值 四個方向
兩個值 左上右下 和 右上左下
三個值 左上 右上左下 右下
四個值 左下 右上 右下 左上