关于CSS伪元素的应用-css教程-PHP中文网

首页

web前端

css教程

关于CSS伪元素的应用

不言

Jun 20, 2018 pm 01:51 PM

box-shadow

利用CSS伪元素：before 和：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下

利用CSS伪元素：before 和：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果,
下面就展示三个例子：
1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号；
2、利用 :before, :after, box-shadow 实现3D阴影效果;
3、利用 :before, :after, box-shadow 实现照片叠加效果.

<!DOCTYPE html> 
<html> 
<head> 
<title>Pseudo Demo</title> 
<style> 
body{background-color:#ccd3d7;padding:40px;} 
h2{display:block;border-bottom:1px solid #ddd;padding:15px;} 
p.myquote{padding:1em;font-size:16px;margin:8px 1em;position:relative;color:blue;line-height:1.7em;} 
p.myquote:before,p.myquote:after{font-size:40px;position:absolute;padding:0;margin:0;color:green;} 
p.myquote:hover:before,p.myquote:hover:after{color:red;font-size:50px;} 
p.myquote:before{content:"“";left:0;left:-10px;} 
p.myquote:after{content:"”";padding-left:15px;bottom:4px;} 
.shbox{ 
background:#fff; 
padding:10px; 
width:90%; 
margin:40px auto; 
height:auto; 
margin:40px auto; 
} 
.sh-down-lr{position:relative;} 
.sh-down-lr:before,.sh-down-lr:after{ 
z-index: -1; 
position: absolute; 
content: ""; 
bottom: 15px; 
left: 10px; 
width: 50%; 
top: 80%; 
max-width:300px; 
background: #777; 
-webkit-box-shadow: 0 15px 10px #777; 
-moz-box-shadow: 0 15px 10px #777; 
box-shadow: 0 15px 10px #777; 
-webkit-transform: rotate(-3deg); 
-moz-transform: rotate(-3deg); 
-o-transform: rotate(-3deg); 
-ms-transform: rotate(-3deg); 
transform: rotate(-3deg); 
} 
.sh-down-lr:after{ 
-webkit-transform: rotate(3deg); 
-moz-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
-ms-transform: rotate(3deg); 
transform: rotate(3deg); 
right:10px; 
left:auto; 
} 
.stackone { 
border: 6px solid #fff; 
width: 400px; 
height:225px; 
margin: 50px; 
position: relative; 
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
} 
.stackone img{width:100%;heigth:100%;} 
.stackone:before,.stackone:after { 
content: ""; 
width: 400px; 
height:225px; 
background: #aaa; 
border: 6px solid #fff; 
position:absolute; 
z-index:-1; 
top:0; 
left:-10px; 
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg); 
-o-transform: rotate(-5deg); 
-ms-transform: rotate(-5deg); 
transform: rotate(-5deg); 
} 
.stackone:after { 
top:5px; 
left:0; 
-webkit-transform: rotate(3deg); 
-moz-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
-ms-transform: rotate(3deg); 
transform: rotate(3deg); 
} 
</style> 
</head> 
<body> 
<p class="shbox sh-down-lr"> 
<h2>CSS Demo :before, :after, box-shadow</h2> 
<p>人最宝贵的是生命。生命属于人只有一次。人的一生应当这样度过：当回忆往事的时候，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧.</p> 
<p>钢是在烈火里燃烧、高度冷却中炼成的，因此它很坚固。我们这一代人也是在斗争中和艰苦考验中锻炼出来的，并且学会了在生活中从不灰心丧气。</p> 
</p> 
<p style="background:none;"> 
<p> 
<img src="http://photos.tuchong.com/392707/f/6512410.jpg" /> 
<p> 
</p> 
</body> 
</html>

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于bootstrap3.0的栅格系统原理

关于css如何控制背景的分享

如何使用CSS控制前端图片HTTP请求

以上是关于CSS伪元素的应用的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

什么是CSS网格？Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂，响应式Web布局的强大工具。它简化了设计，提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架

CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画？Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS，关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗？Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换，关键属性，浏览器兼容性和性能注意事项的讨论。（角色计数：159）

我们如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度（线性，径向，重复）来增强网站视觉效果，添加深度，焦点和现代美学。

CSS中的伪元素是什么？Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素，它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

记事本++7.3.1

好用且免费的代码编辑器

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

Dreamweaver CS6

视觉化网页开发工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。