CSS实现字体镂空效果、阴影效果、字体阴影效果

2024-06-06 17:30:49

1.文字镂空效果

1.1.创建一个div，用于存放需要镂空的文字

<div class="box1">
<h1>镂空效果</h1>
</div>

1.2.编写css

.box1{
           width: 200px;
           height: 100px;
           margin: 0 auto;
           background-color: aqua;
           text-align: center;
           -webkit-text-stroke: 1px red; //文字描边
           color: transparent; //字体颜色设置为透明
       }

1.3.效果

2.阴影效果

2.1、html

<div class="box2"></div>

2.2、css

.box2{
                    width: 100px;
                    height: 100px;
                    margin: 0 auto;
                    border: 1px solid black;
                    box-shadow: 1px 1px 20px 5px #69de32 inset, /* 第一个1px是左右偏移量，第二个是上下偏移量，第三个是发散的宽度，第四个是阴影的宽度。inset代表内边阴影,不加代表外边阴影 */
                    1px 1px 10px 5px red;  /* //可以加多个阴影 */
                }

2.3.、效果

3.文字阴影

3.1、html

<p>文字阴影</p>

3.2、css

p{
       font-size: 50px;
       color: #959595;
           text-align: center;
       text-shadow: 1px 1px 3px red;
       }

3.3、效果

CSS实现字体镂空效果、阴影效果、字体阴影效果相关推荐

CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
html字体荧光效果,CSS3字体发光效果
CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果 text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shad ...
css实现中间镂空效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS冷门属性 mix-blend-mode 制作文字镂空效果
CSS冷门属性 mix-blend-mode 制作文字镂空效果本篇文章为大家带来如何制作文字镂空效果,仅仅使用CSS样式进行处理,借助 mix-blend-mode 属性,将文字的颜色反转,从而实现 ...
CSS 实现字体发光效果 text-shadow
一.CSS字体发光效果: CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果 1.text-shadow:该属性为文本添加阴影效果. text-shadow: h-s ...
altium Designer丝印显示汉字，更换字体，数码管风格，镂空效果
1.首先勾选"TrueType",即丝印使用矢量字体.这时就可以正常显示汉字了. 2.勾选"TrueType"后,可以在下面的"Font Name&q ...
HTML文字描边像素,css怎么实现字体描边效果？
css怎么实现字体描边效果?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3 中有text-stroke属性,加上-webkit-前缀兼容性也还不 ...
php 文字描边,css怎么实现字体描边效果
css实现字体描边效果的方法:可以利用text-stroke属性来实现字体描边效果,如[-webkit-text-stroke:6px transparent;].text-stroke属性常配合te ...
小程序css之字体镂空
wxml:  <view class="container"><view class="loukong&q ...

最新文章

热门文章