SOURCE

<div class='flex'>
    <div class='border'>
        <h2>实现显示图片的圆角边框</h2>
    </div>
    <div class="box"></div>

    <div class="triangle"></div>
    <div class="triangle1"></div>
</div>

<div class="shadow">
    <div class="left">左边阴影</div>
    <div class="bottom">底部阴影</div>
    <div class="right">右部阴影</div>
    <div class="top">顶部部阴影</div>
    <div class="left-top">左上阴影</div>
    <div class="right-top">右上阴影</div>
    <div class="left-bottom">左下阴影</div>
    <div class="right-bottom">右下阴影</div>
    <div class="no-left">无左阴影</div>
    <div class="no-bottom">无下阴影</div>
    <div class="no-right">无右阴影</div>
    <div class="no-top">无上阴影</div>        
</div>

.flex{
    display: flex;
}

.border{
    padding: 20px 30px;
    background: #fff;
    opacity: 1;
    margin: 50px;
    width: fit-content;
    border-radius: 20px;
    position: relative;
    border: 10px solid rebeccapurple;
    background-clip: padding-box;
}

.border::after{
    position: absolute;
    content: '';
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(180deg, pink 0%, orange 100%);
    z-index: -1;
    border-radius: 20px;
}

.box{
    height: 100px;
    width: 100px;
    background: #fff;
    margin-top: 50px;
}

.triangle {
    /* 设置宽度和高度为 0 */
    width: 0;
    height: 0;
    /* 设置边框样式和颜色 */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3498db;
    /* 添加阴影效果 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* 为了让阴影更明显，设置一个 margin */
    margin: 50px;
}

.triangle1{
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #fff;
    margin: 50px;
    /* border: 1px solid red; */
    /* box-shadow: 2px 2px 5px 0 red; */
}

.triangle1::after{
    position: absolute;
    content: '';
    top: 380px;
    left: 250px;
    width: 0;
    height: 0;
    border: 20px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    display: inline-block;
    transform: rotate(135deg);
    box-shadow: 5px -5px 6px -4px red;
    }


.shadow div{
    float:left;
    margin:50px 120px;
    width:100px;
    height:100px;
    border:2px solid orange;
    text-align:center;
    line-height:100px;
    }
.left{
    box-shadow:-5px 0 10px -5px #00ff00;
}
.bottom{
    box-shadow:0 5px 10px -5px #00ff00;
}
.right{
    box-shadow:5px 0 10px -5px #00ff00;
}
.top{
    box-shadow:0px -5px 10px -5px #00ff00;
}
.left-top{
    box-shadow:-5px -5px 10px  -4px #00ff00;            
}        
.right-top{
    box-shadow:5px -5px 10px -4px #00ff00;
}
.left-bottom{
    box-shadow:-5px 5px 10px -4px #00ff00;
}
.right-bottom{
    box-shadow:5px 5px 10px -4px #00ff00;
}
.no-left{
    /* .right-bottom,.right-top组合 */
    box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
}
.no-bottom{
    /* .left-top,.right-top组合 */
    box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
}
.no-right{
    /* .left-top，.left-bottom组合 */
    box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
}
.no-top{
    /* .left-bottom,,right-bottom组合 */
    box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
}
————————————————

                    本文为博主原创文章，欢迎转载，请注明出处
                
原文链接：https://blog.csdn.net/mouday/article/details/116781796