首页 > 开发 > CSS > 正文

CSS3中文字镂空、透明值、阴影效果设置示例小结

2024-07-11 08:25:36

字体：大中小

来源：转载

供稿：网友

text-fill-color打造镂空文字：
代码

CSS Code复制内容到剪贴板

-webkit-text-fill-color:transparent; -webkit-text-stroke:1px #000;

效果
201637105111410.png (752×75)

text-stroke-color透明值让文字更柔和：
代码

CSS Code复制内容到剪贴板

background-image:-webkit-linear-gradient(#eee,#000); -webkit-background-clip:text;
-webkit-text-fill-color:transparent;

效果1
201637105151945.png (609×90)

代码

CSS Code复制内容到剪贴板

background-image:-webkit-linear-gradient(#eee,#000); -webkit-background-clip:text;
-webkit-text-fill-color:transparent; -webkit-text-stroke:1px transparent;

效果2
201637105229256.png (620×72)

对比你会发现效果2中的文字比效果1更柔和一点

text-shadow文字阴影
语法：

CSS Code复制内容到剪贴板

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

我们来实现一个有阴影的文本示例：
代码

CSS Code复制内容到剪贴板

text-shadow:2px 2px 0 #000;

效果
201637105301417.png (622×53)

text-shadow有3个length参数，第1个表示水平偏移，第2个表示垂直偏移，第3个表示模糊（可选）
柔和一点的文字阴影：
代码

CSS Code复制内容到剪贴板

text-shadow:1px 1px 5px #000;

效果
201637105352727.png (596×46)

多重阴影：
代码

CSS Code复制内容到剪贴板

上一篇：简单掌握CSS3将文字描边及填充文字颜色的方法

下一篇：H1标签使用的七大注意事项(推荐)

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注