css3 text-shadow 浮雕、镂空、荧光效果

text-shadow 简单介绍

text-shadow 属性应用于文本阴影。

text{text-shadow:h-shadow v-shadow blur color;
}

属性值	描述
h-shadow	必需。水平X轴方向，阴影的位置。允许负值。
v-shadow	必需。垂直Y轴方向，阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。（不选为透明）

演示效果

<template><view class="content"><view class=" ">CSDN</view></view>
</template><style>.content {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;width: 100%;}
</style>

浮雕效果

<style>/* 浮雕 */.embossment {font-size: 100rpx;font-weight: 600;color: #DDDDDD;text-shadow: 2rpx 2rpx 0rpx rgba(0, 0, 0, 1),-2rpx -2rpx 0rpx rgba(255, 255, 255, 1);}
</style>

镂空效果

<style>/* 镂空 */.hollow-out {font-size: 100rpx;font-weight: 600;color: #DDDDDD;text-shadow: -2rpx -2rpx 0rpx rgba(0, 0, 0, 1),2rpx 2rpx 0rpx rgba(255, 255, 255, 1);}
</style>

荧光效果

<style>/* 荧光 */.fluorescent {font-size: 100rpx;font-weight: 600;color: #FFFFFF;text-shadow: 0rpx 0rpx 4rpx rgba(0, 255, 255, 1.0),0rpx 0rpx 10rpx rgba(0, 255, 255, 1.0),0rpx 0rpx 20rpx rgba(0, 255, 255, 1.0),0rpx 0rpx 30rpx rgba(0, 255, 255, 1.0);/* text-shadow: 0rpx 0rpx 4rpx rgba(255, 68, 0, 1.0),0rpx 0rpx 10rpx rgba(255, 68, 0, 1.0),0rpx 0rpx 20rpx rgba(255, 68, 0, 1.0),0rpx 0rpx 30rpx rgba(255, 68, 0, 1.0); */}
</style>

点赞评论收藏 ~~ 有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞评论收藏

css3 text-shadow 浮雕、镂空、荧光效果相关推荐

CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
天空飘彩带的css3代码_纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
【转载】纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
[Android开发]镂空的TextView，镂空字体，TextView实现镂空字体效果
前言:本来是下班途中跟IOS的同事一起走在路上闲聊,他让我看了一个App的镂空字体效果,然后我俩讨论了几句,我当时已经有一个大体上的实现思路了,于是第二天就实现出来了,讲真的目前这玩意没有用到我开发中 ...
CSS图像填充文字（镂空文字效果 / 文字镂空效果）
先展示一下最终效果: 开始做 1. 搭建基本代码结构 <!DOCTYPE html> <html><head><meta charset="utf- ...
css字体描边加阴影,css text-shadow 轻松实现文字投影/描边/浮雕/剪纸/发光效果
css3很多知识值得我们去了解,一些我们惯常用图片制作出来的效果,也许用CSS3几行代码就能实现,正如本文介绍的,使用css text-shadow 属性,就能轻松实现文字投影/描边/浮雕/剪纸/发光 ...
iOS 镂空文字效果
注意:一定要继承于UILabel,如果继承于UIView的话镂空的效果出不来 #import <UIKit/UIKit.h> @interface HollowOutLabel : UIL ...

css3 text-shadow 浮雕、镂空、荧光效果

text-shadow 简单介绍

演示效果

浮雕效果

镂空效果

荧光效果

css3 text-shadow 浮雕、镂空、荧光效果相关推荐

最新文章

热门文章