box-shadow单边阴影

2019-08-23532次阅读css模块

box-shadow以由逗号分隔的列表来描述一个或多个阴影效果。这里记录一下box-shadow单边阴影的实现。

先看看box-shadow最长的语法长啥样:

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

 

box-shadow单边阴影的实现

.top{
    box-shadow: 0 -2px 0 red;  
}
.right{
    box-shadow: 2px 0 0 green;  
}
.bottom{  
    box-shadow: 0 2px 0 blue;  
}
.left{
    box-shadow: -2px 0 0 orange;  
}

 

上一篇: request、request-promise、cheerio抓取网页内容  下一篇: Node.js文件查找策略  

box-shadow单边阴影相关文章