css - 边框阴影 CSS
问题描述
如何为阴影添加边框?
这是我的代码:
.btn {
margin: 10px;
}
.btn:active span {
transform: translate(0, 6px);
box-shadow: 0 -5px 0 blue;
transition: 0.3s;
}
.btn {
display: inline-block;
border-radius: 6px;
box-shadow: 0 6px 0 blue;
}
.btn span {
display: inline-block;
color:white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
这是我的jsfiddle
解决方案
使用多个阴影:
.btn {
margin:10px;
display: inline-block;
border-radius: 6px;
box-shadow: 0px 0px 0px 2px #000,
0 6px 0 red,
0px 6px 0px 2px #000,
0px 0px 0px 2px #000;
}
.btn span {
display: inline-block;
color: white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
<a href="#" class="btn"><span>Press this!</span></a>
推荐阅读
- json - 如何从 JSON 对象流中获取第一个元素?
- sql - 如何在 SQL Bigquery 中提取字符串、数字(来自较长的自由文本)
- sql - 根据特定列识别重复行
- android - MVI 中的共享视图模型
- java - 从 Java 程序调用命令历史记录
- r - 将数据框导出到 R 中的文本文件
- python - ImportError:在 ImageAI 视频对象检测期间无法从“keras.utils.generic_utils”导入名称“LazyLoader”
- javascript - 如何解决自定义元素错误,当我尝试在 vue.js 中的组件之间切换时出现此错误?
- python - 无法在 Python 中解析 XML 文件 - xml.etree.ElementTree.ParseError
- android - 了解垃圾收集器日志颤动