一种文本框的阴影效果，四周全发光

最新推荐文章于 2022-07-05 10:31:55 发布

壹只很拽的猫

最新推荐文章于 2022-07-05 10:31:55 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/tiramisu_ljh/article/details/50522473

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

#nickname {

    /*line-height: 1.428571429;行高加上去怪怪的*/
    vertical-align: middle;
    background-color: #ffffff;
    font-size: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 4px; /*圆角*/
    padding: 6px 12px;
    width: 80%;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#nickname:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}