HtmlCSS前端实现文字边框阴影效果

2019.5.9 html

一、底部阴影

.safety {
    width: 44px;
    height: 44px;
    color: #FFFFFF;
    line-height: 44px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px 2px #ccc;
}
.safety1-danger {
    background: #D72A26;
}
.safety1-success {
    background: #05B570;
}
.safety2 {
    background: #FA6300;
}

2.左边和底部阴影

box-shadow: 0 5px 10px rgba(96, 118, 243, 0.20);
-moz-box-shadow: 0 5px 10px rgba(96, 118, 243, 0.20);
-webkit-box-shadow: 0 5px 10px rgba(96, 118, 243, 0.20);
border: 1px solid #dedfe7;

3.带有顶部圆角边框的左边和底部阴影

.partOne2d2div {
    width: auto;
    height: auto;
    padding: 35px 60px;
    border-radius: 10px;
    position: relative;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(96, 118, 243, 0.20);
    -moz-box-shadow: 0 5px 20px rgba(96, 118, 243, 0.20);
    -webkit-box-shadow: 0 5px 20px rgba(96, 118, 243, 0.20);
    border: 1px solid #dedfe7 \9;
    *border: 1px solid #dedfe7;
    _border: 1px solid #dedfe7;
    border-top: 10px #3dcc91 solid;
}

4.背景阴影

.post {
    padding: 35px 25px;
    background: #fff;
    margin-bottom: 25px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(146,146,146,.1);
    -moz-box-shadow: 0 5px 10px 0 rgba(146,146,146,.1);
    box-shadow: 0 5px 10px 0 rgba(146,146,146,.1);
}

更新列表：

参考文章：

相关阅读