使用Before和After伪元素制作文本阴影

最新推荐文章于 2020-12-29 08:26:32 发布
最新推荐文章于 2020-12-29 08:26:32 发布
阅读量921 收藏 1
点赞数
分类专栏： css 文章标签： 使用Before和After伪元素制作文本阴影
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangbaokang/article/details/82017558
版权

需要理解:before和:after的使用，如下代码收藏于慕课网。
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
</style>
</head>
<body>
  <div class="box effect">
  <h3>Shadow Effect </h3>
</div>
</body>
</html>

效果如下，还是挺不错的，可以用在banner图等，不需要美工进行制图。

这里写图片描述

专业墙纸贴纸厨房用具装饰出售，本人网店经营，访问即是爱

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。店铺地址https://item.taobao.com/item.htm?id=570637716145

黄宝康
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生JS给可编辑DIV添加文字阴影
越陌度阡
06-02 1572
给大家分享一个用原生JS给可编辑DIV添加文字阴影的特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS给
CSS伪元素：after：before的特殊用法demo
06-19
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
【CSS进阶】巧用伪元素before和after制作绚丽效果
weixin_43779957的博客
07-27 1505
原创：叫我詹躲躲 来源：掘金 链接：巧用伪元素before和after制作绚丽效果 所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。本文主要探究伪元素beforce和after的常用使用场景。 CSS :before 选择器 定义和说明 :before 选择器向选定的元素前插入内容。 使用content 属性来指定要插入的内容。 CSS :after 选择器 定义和说明 :after 选择器向选定的元素之后插入内容。 使用c
css :before,:after伪元素的理解和妙用
热门推荐
young_Emily的博客
07-17 1万+
1.基本语法 ·平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性。不 过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了。·属性 co
用伪元素做图片的底部阴影效果
凝视深渊
03-12 1312
我司的 UI 虽然不是 处女座，但认（挑）真（剔）程度也与之不相上下了。作为一枚前端，当然也不好意思掉链子，所以在 UI 小哥的督促下，会最大可能地完美实现视觉稿。于是乎，一些本来一行实现的东西，为了效果美观，会用更多代码做得更加细致。 上效果： UI 要求是，底部阴影宽度比图片的宽度略小，然后整体是个轮播效果，每张图片的阴影颜色不一样。 假设图片的容器为banner, 为了减少html...
CSS 用before和after伪类选择器制作阴影
weixin_30810583的博客
03-05 346
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>before、after</title> <style> .box h3{ text-align:center; position:relative; ...
CSS伪类对象before和after的用法实例详解
09-25
在CSS中，`::before` 和 `::after` 是两种伪元素，它们允许我们在一个元素的内容前后添加额外的内容。这两个伪元素通常与`content`属性一起使用，可以在不修改HTML结构的情况下增强页面的视觉效果或者实现某些特定...
css3+伪元素实现鼠标移入时下划线向两边展开的效果
09-24
然后，我们使用伪元素`:before`和`:after`来创建下划线。这两个伪元素的初始宽度为0，高度为3px，背景色为蓝色，并通过绝对定位放置在元素底部居中。同时，我们为它们添加了过渡效果，使其在0.8秒内平滑变化： ```...
搜索图标 search icon 使用css3的after特性进行search icon
04-25
除了`::before`，你还可以使用`::after`伪元素来创建更复杂的图标效果，例如添加动态效果、阴影或者渐变。但在这个例子中，我们只需要一个简单的搜索图标，所以只使用了`::before`。 通过这种方式，我们可以灵活地...
纯css3制作Word文本编辑器效果
11-02
6. **伪元素和伪类**：例如`:before`和`:after`伪元素，可以用来插入额外的元素，如模仿Word的段首缩进。 7. **用户交互**：利用`:hover`、`:active`和`:focus`伪类，可以模拟鼠标悬停、点击和焦点时的视觉反馈，...
[CSS] 用伪元素:after实现分割线和气泡
05-31
用伪元素:after实现分割线和气泡
利用伪元素制作盒子阴影
Efficiency9的博客
07-14 806
本文参考https://paulund.co.uk/learn-css-box-shadow 因为box-shadow和:before以及:after没有什么值得深度剖析的方式，在去解释也不会让自己学到太多东西，如果对伪元素不太熟悉可以参考这个地址（http://blog.jobbole.com/49173/），以下代码也没有什么很绕的逻辑<!DOCTYPE html> <html lang="e
css before after用法_不容错过！css阴影趣味用法大全～
weixin_36292971的博客
12-29 320
使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。 原文来自链接：https://www.webhek.com/post/css-box-shadow-property.html基本用法box-shadow: 1px ...
今天偶然发现的一个：befor和：after的阴影制作，真的很迷人
TeAmo_MyGirl的专栏
12-05 591
用伪类添加翘边阴影：：before和：：after
weixin_30466421的博客
10-19 341
授人以鱼，考人以鱽鱾鲀鱿鲃鲂鲉鲌鲄鲆鲅鲇鲏鲊鲋鲐鲈鲍鲎鲝鲘鲙鲗鲓鲖鲞鲛鲒鲚鲜鲟鲔鲕鲑鲧鲬鲪鲫鲩鲣鲨鲡鲢鲤鲠鲥鲦鲺鲯鲹鲴鲶鲳鲮鲭鲵鲲鲰鲱鲻鲷鲸鳋鳊鳁鳀鲾鲼鳈鳉鳃鳄鲿鳇鳂鳆鳅鲽鳌鳒鳎鳏鳑鳐鳍鳘鳛鳕鳓鳙鳗鳚鳔鳖鳜鳟鳞鳝鳡鳠鳢鳣鳤 代码如下： <!DOCTYPE html><html><head><meta charset=utf-8 /><...
CSS伪元素画分割线与其它实用方法（::before、::after）
I大俊
12-21 4544
CSS伪元素画分割线与其它实用方法（::before、::after）
伪元素
Forever212121的博客
11-07 596
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。 你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章 事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-let
如何解决CSS3使用:after和:before阴影，由z-index引起的问题
weixin_30576859的博客
08-13 330
问题的答案非常简单： #parent { position: relative; z-index: 1; } #pseudo-parent { position: absolute; } /* no z-index allowed */ #pseudo-parent:after { position: absolute; z-index: -1; } 具体参考： ht...
CSS 3，用伪元素制作不一样的阴影效果
TragedyXD的专栏
02-12 1669
曲线阴影，翘边阴影 * { margin: 0; padding: 0; list-style: none } .wrap { margin: 50px auto; width: 600px; height: 200px; background-co
html质感阴影_CSS3 金属质感的3D立体阴影文字特效
最新发布
05-19
要实现HTML质感阴影和CSS3金属质感的3D立体阴影文字特效，可以按照以下步骤进行操作： 1. 创建一个HTML文档，并添加一个div元素作为容器。 2. 使用CSS设置容器的宽度、高度、背景颜色和阴影效果。例如： ```css #container { width: 300px; height: 150px; background-color: #eee; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); } ``` 这里的box-shadow属性可以设置阴影效果，包括水平偏移、垂直偏移、模糊半径和阴影颜色等参数。 3. 在容器中添加一个文本元素，并使用CSS设置文本的字体、大小、颜色和3D效果。例如： ```css #container p { font-family: Arial, sans-serif; font-size: 40px; color: #333; text-shadow: 0px 1px 0px #fff; transform: perspective(400px) rotateX(30deg); } ``` 这里的text-shadow属性可以设置文本的阴影效果，transform属性可以设置元素的3D效果，包括透视距离、旋转角度等参数。 4. 最后，使用CSS3的伪元素:before和:after来创建金属质感的3D立体阴影效果。例如： ```css #container p:before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 20px 20px; z-index: -1; transform: rotateY(30deg) translateZ(-20px); } #container p:after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-image: linear-gradient(135deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 20px 20px; z-index: -1; transform: rotateX(-30deg) translateZ(-20px); } ``` 这里的:before和:after伪元素分别用于创建左侧和上方的金属质感阴影效果，可以使用background-image属性设置渐变背景色，并使用transform属性设置旋转和位移效果。 通过以上步骤，就可以实现HTML质感阴影和CSS3金属质感的3D立体阴影文字特效了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值