快捷通道

网页图片添加阴影效果和圆弧边框

欧普莱斯 10

       让图片或者边框更有立体感,增加阴影和圆弧边框效果,参数可调整


用在img标签

1-2111020934024B.jpg


 img {

    display: block;

    -webkit-box-shadow: 1px 1px 5px #00000052;  //阴影

    border-radius: 4px;  // 圆弧

}


 

也可用在 a 标签


1-211102094143554.jpg

.dh_nav2 > ul > li > a {

    display: block;

    padding: 0 28px;

    line-height: 35px;

    font-size: 15px;

    font-family: microsoft yahei;

    text-decoration: blink;

    background-color: #1d6a90;

    color: white;

    -webkit-box-shadow: 1px 1px 5px #00000052;

    border-radius: 4px;

}


如果只需要下边圆弧可用如下代码

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

1-21110209520J35.jpg