本文介绍了CSS 翘边阴影的实现代码,分享给大家。具体如下:
仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。
实现原理和【CSS】曲线阴影差不多,也是通过伪元素来实现。
HTML代码
<ul class="box"> <li><img src="......" alt=""></li> <li><img src="......" alt=""></li> <li><img src="......" alt=""></li> </ul>
CSS代码
ul,li { list-style:none; } .box { width: 980px; height: auto; clear: both; overflow: hidden; margin: 20px auto; } .box li { width: 300px; height: 210px; position: relative; background: #fff; float: left; margin: 20px 10px; border: 2px solid #efefef; box-shadow: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0.1) inset; } .box li img { display: block; width: 290px; height: 200px; margin: 5px; } .box li:before, .box li:after { content: ''; position: absolute; z-index: -2; width: 80%; height: 80%; bottom: 8px; background: transparent; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); } .box li:before { left: 7%; transform: skewX(-12deg) rotate(-4deg); } .box li:after { right: 7%; transform: skewX(12deg) rotate(4deg); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...