同步发布:https://blog.jijian.link/2020-03-25/css3-box-shadow/

视觉如下:

CSS3 之书页阴影效果:

 <html>
<head>
<meta charset="UTF-8">
<title>书页阴影效果</title>
<style>
.box {
width: 400px;
margin: 0 auto;
position: relative;
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16);
}
.box:before,
.box:after {
content: "";
position: absolute;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
bottom: 15px;
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
height: 20px;
left: 3px;
max-width: 300px;
width: 40%;
}
.box:after {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
left: auto;
right: 3px;
}
.box .content {
position: relative;
z-index: 2;
font-size: 13px;
text-align: center;
background: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
</div>
</div>
</body>
</html>

总结:运用css的伪类选择器after,before设置box左右两个卷角,设置阴影(box-shadow)和旋转(transform)属性,调整位置达到卷角视觉效果,设置content的z-index属性让内容浮在阴影之上。

CSS3 之书页阴影效果的更多相关文章

  1. 怎样使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...

  2. CSS3 -web-box-shadow实现阴影效果

    -webkit-box-shadow:2px -2px 10px #06c; 给元素添加阴影效果 text-shadow 是给文本添加阴影效果属性同上 形成的阴影跟阴影本体大小一致,四个属性分别代表 ...

  3. CSS3 box-shadow 内外阴影效果

    说明 box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果.定义多个阴影,使用逗号分隔. 语法 box-shadow: none | [inset? && [<o ...

  4. 一个CSS3滤镜Drop-shadow阴影效果

    <html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...

  5. 用CSS3实现带有阴影效果和颜色渐变的按钮

    这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...

  6. CSS3不遥远,几个特性你要知道

    CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性.尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的.CSS3中的5 ...

  7. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  8. jQuery实现页面元素智能定位

    实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...

  9. CSS_跳动的心

    详细教程CSS3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. idea 用鼠标滚轮调整代码文字大小

    File > Settings > Keymap > Editor Actions 下,我们可以找到 “Decrease Font Size”和“Increase Font Size ...

  2. 手写ORM入门篇(一)

    对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换 . ...

  3. win10系统驱动备份及还原

    win10系统驱动备份及还原 方法如下: 1.右键单击开始按钮,选择“命令提示符(管理员)” 2.输入如下命令后按回车,等待备份完成: dism /online /export-driver /des ...

  4. Dockerfile构建jar镜像

    dockerDockerfilejar包docker-compose 一.安装docker和compose 二.准备jar包 三.编写配置文件 1. Dockerfile 2. docker-comp ...

  5. Tensorflow在python3.7版本的运行

    安装tensorflow pip install tensorflow==1.13.1 -i https://pypi.tuna.tsinghua.edu.cn/simple 可以在命令行 或者在py ...

  6. [HNOI2012]矿场搭建 (点双连通)

    题目 [HNOI2012]矿场搭建 解析 这个题做的我十分自闭.. 没看出这个是个点双,然后一晚上+半上午.. 一看肯定和割点有关,我们找到所有的点双,会发现有这么几种情况 连通块中一个割点也没有,这 ...

  7. Linux基础-7.Linux网络基础设置

    装好Linux,Linux一般会默认使用NetworkManager来辅助管理网络配置.对于配置Linux服务器来说,我们不需要NetworkManager来配置网络,所以要关闭它,不然它会影响手动配 ...

  8. java系统化基础-day01-基础语法知识

    1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...

  9. [JavaScript] js中全局标识正则表达式的lastIndex属性

    在JavaScript中使用正则表达式时,遇到一个坑:第一次匹配是true,第二次匹配是false. 因为在带全局标识"g"的正则表达式对象中,才有“lastIndex” 属性,该 ...

  10. Python学习日记(二十八) hashlib模块、configparse模块、logging模块

    hashlib模块 主要提供字符加密算法功能,如md5.sha1.sha224.sha512.sha384等,这里的加密算法称为摘要算法.什么是摘要算法?它又称为哈希算法.散列算法,它通过一个函数把任 ...