代码拉取完成,页面将自动刷新
?> 背景知识: box-shadow
<script v-pre type="text/x-template" id="single-projection"> <style> main { width: 100%; padding: 20px 0 0 0; } .projection { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; } .projection > div { width: 180px; height: 120px; background: rgba(180,160,120,.2); } .projection:not(:first-child:last-child) > div { border: 2px solid transparent; background-clip: content-box; } .projection:last-child { margin-bottom: 0; border-bottom: 0; } .projection:nth-of-type(1) > div { margin-left: -6px; box-shadow: 0 0 6px rgba(180,160,120,.8); } .projection:nth-of-type(2) > div { border-bottom: 0; box-shadow: 0px 6px 5px -5px rgba(180,160,120,.6); } .projection:nth-of-type(3) > div { border-right: 0; border-bottom: 0; box-shadow: 5px 5px 5px -4px rgba(180,160,120,.6); } .projection:nth-of-type(4) > div { border-right: 0; border-left: 0; box-shadow: 6px 0 5px -5px rgba(180,160,120,.6), -6px 0 5px -5px rgba(180,160,120,.6); } .projection:nth-of-type(5) > div { box-shadow: 0 0 0 1px rgba(180,160,120,.6); } </style>① 无偏移投影
② 单侧投影
③ 邻边投影
④ 两侧投影
⑤ 1px投影
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。