用CSS如何给字体加白边

Posted 2023-05-13

不用filter可以吗

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

body background-color: #0b93d5;text-shadow:-1px 0 white,0 1px white,1px 0 white,0 -1px white;

3、浏览器运行index.html页面，此时成功给字体添加了一个白边。

参考技术A 用text-shadow此属性用来设计字体的投影效果，不过IE不支持，不过CSS3.0就可以支持，以后也就可以显示了。text-shadow:的设置是这样：text-shadow:1PX 1PX 1PX #FFFFFF。。第一个数值是X轴方向，第二个数值是Y轴方向，第三数值是投影后的模糊度越大越模糊，第四个是投影后的颜色色值。 参考技术B 貌似不可以。

IOS 给UILabel字体加一个带颜色的边框

今天做项目碰见一个UI效果，给字体加一圈白边，看起来就像是加了一个背景，思路就是继承一个UILabel，重新覆写drawTextInRect方法，就可以简单实现这个效果，上代码：

 1 //
 2 //  HGLLabel.m
 3 //  xxxxxxxxxx.xxx
 4 //
 5 //  Created by xxxxx on 2017/12/23.
 6 //  Copyright ? 2017年 xxxx. All rights reserved.
 7 //
 8 
 9 #import "HGLLabel.h"
10 
11 @implementation HGLLabel
12 
13 - (void)drawTextInRect:(CGRect)rect {
14     CGSize shadowOffset = self.shadowOffset;
15     UIColor *textColor = self.textColor;
16     
17     CGContextRef c = UIGraphicsGetCurrentContext();
18     CGContextSetLineWidth(c, 8.0);//字体边缘的宽度
19     CGContextSetLineJoin(c, kCGLineJoinRound);
20     
21     CGContextSetTextDrawingMode(c, kCGTextStroke);
22     self.textColor = [UIColor whiteColor];//字体边缘加的颜色
23     [super drawTextInRect:rect];
24     
25     CGContextSetTextDrawingMode(c, kCGTextFill);
26     self.textColor = textColor;
27     self.shadowOffset = CGSizeMake(0, 0);
28     [super drawTextInRect:rect];
29     
30     self.shadowOffset = shadowOffset;
31 }
32 
33 @end

 

 

注释很清楚，不多说。