首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用css向文本添加外部描边

使用CSS向文本添加外部描边可以通过text-stroke属性来实现。text-stroke属性用于设置文本的描边样式,包括描边的颜色、宽度和样式。

具体的CSS代码如下:

代码语言:txt
复制
.text-stroke {
  -webkit-text-stroke: 2px #000; /* 设置描边宽度和颜色 */
  color: #fff; /* 设置文本颜色 */
}

上述代码中,-webkit-text-stroke属性用于设置描边的宽度和颜色,2px表示描边的宽度为2像素,#000表示描边的颜色为黑色。color属性用于设置文本的颜色,#fff表示文本颜色为白色。

使用场景:

  • 在设计中,可以使用文本描边来增加文本的可读性和视觉效果,使文本更加醒目。
  • 在特殊的标题、标语或按钮等元素中使用文本描边,可以使其在页面中更加突出。

推荐的腾讯云相关产品:

  • 腾讯云CDN(内容分发网络):https://cloud.tencent.com/product/cdn
  • 腾讯云Web应用防火墙(WAF):https://cloud.tencent.com/product/waf
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm

请注意,以上推荐的腾讯云产品仅供参考,具体选择还需根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 文字-webkit-text-stroke和text-shadow

    二、-webkit-text-stroke文字简介 CSS text-stroke属性的语法并不复杂,和border,background属性类似,其实是若干个CSS属性合并后的名称写法,不过仅仅是下面这两个...CSS属性合体:text-stroke-width和text-stroke-color,也就是的宽度和的颜色,和border不同,对于text-stroke属性,我们无法指定的类型,只能是实线...居中特性的应用 text-stroke的居中特性,本质上让真实文本的字重削弱了,例如文字在页面上渲染时候,线条粗细大概是1像素,这时候我们设置个1像素宽的,则真实显示粗细岂不是只剩下0.5像素...四、text-shadow与文字的外效果 如果想要有文字的外效果,可以使用CSS3 text-shadow属性模拟,兼容IE10+,例如: .strok-outside { text-shadow...: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red; } 由于text-shadow不支持阴影扩展(box-shadow支持),因此,我们使用阴影叠加实现,

    3.2K21

    CSS3文本阴影 text-shadow

    HTML5学堂:CSS3文本阴影是给文本添加阴影效果,而在CSS3文本阴影在CSS以及存在了,只是CSS2.1的时候不用了,但是在CSS3又重新使用了,这是因为前端开发者对文本阴影开始重视了,使用更加广泛了...而本章对CSS3文本阴影的讲解希望对大家有帮助!谢谢~~ CSS3阴影的种类 可以分文字阴影和盒模型阴影。...代表“一次” “*”表示可出现多次 CSS3文本阴影 应用 ? 我们可以通过文本阴影实现“外发光”“火焰”“内陷”“立体”“镂空”等各种效果。...接下来我们就来举几个例子,实战一下~ 结构代码: 欢迎沟通交流~HTML5学堂 : 样式代码: html { background: #000...效果有时还是可以试用达到一种特殊的效果,其主要运用两个阴影,第一个向左上投影,而第二向右下投影,还需注意,制作的阴影效果我们不使用模糊值。

    2.2K70

    HTML5-Canvas初探(1)

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...需要知道的是此方法仅仅做路径运动,而不存在任何视觉上的绘图效果(上色、) .stroke() 方法,有玩过AfterEffect的朋友会很清楚,不给运动路径加stroke特效的画是不存在效果的...,canvas也一样,想要运动路径轨迹能有视觉效果,需要使用相应的上色/方法 ---- 自此我们很轻松地绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢?...答案很简单,使用ctx.strokeStyle来设定的颜色即可。...最后看看pattern方式,strokeStyle之所以不叫strokeColor是因为它除了支持颜色还支持图案(搞设计的朋友或许称作笔触会更有feel)。

    1.4K20

    SVG 从入门到后悔,怎么不早点学起来(图解版)

    使用 stroke 设置的颜色,使用 fill="none" 将填充色改成透明。最后就形成上图的效果。 简写 如果全是使用大写 L 来描述每个点的位置,那可以把 L 也去掉,直接写点集。...常用样式设置 SVG 设置样式的属性和 CSS 稍微有点不同,但初学时不需要了解太深入,我们只需将常用的学会即可。 比如填充色、颜色等。...RGBA 或者 HSLA 的方式你自己动手试试看~ 颜色 stroke 可以通过 stroke 属性设置的颜色,之前也使用过。...如果不设置 stroke ,图形默认是没有颜色的。...颜色的不透明度 stroke-opacity 和 fill-opacity 差不多,只不过 stroke-opacity 是设置的不透明度 <svg width="400" height="400

    3.1K10

    【Unity3D】使用 FBX 格式的外部模型 ( Unity 中添加 FBX 模型 | Scene 场景中添加 FBX 模型 | 3D 物体渲染 | 3D 物体材质设置 )

    文章目录 一、 Unity 中添加 FBX 模型 二、 Scene 场景中添加 FBX 模型 三、3D 物体渲染 四、3D 物体材质设置 一、 Unity 中添加 FBX 模型 ---- Unity...中使用的 3D 模型格式为 FBX , 使用如下建模软件 可制作该类型模型 : 3Dmax Maya ZBrush Cinema4D Blender 建模完成后 , 将 3D 模型导出为 FBX (....fbx ) 格式 即可在 Unity 中使用 ; 在 Project 文件窗口 中的 Asstes 目录 下 , 创建一个模型目录 Models , 将 模型文件直接从文件系统中拖到该目录中 ; 在文件系统中...Project 窗口选中模型 , 在右侧的 Inspector 检查器窗口 中可以查看该模型的属性 , 以及在下方可以预览该模型 ; 下方的预览窗口可能是隐藏的 , 可以点一下顶部展开该预览窗口 ; 二、...Scene 场景中添加 FBX 模型 ---- 使用鼠标左键按住 Project 文件窗口 中的 FBX 模型 , 可以将模型拖动到 Hierarchy 层级窗口 或 Scene 场景窗口 , 就可以将该模型添加

    8.1K20

    Android为TextView添加字体库和设置的方法

    这三种字体,如果在没有指定字体的情况下,系统会使用 sans 作为文本显示的字体。...三、为TextView添加 Android的默认控件TextView,相信大家都不会陌生,但是原生的TextView是不支持效果的,但是在实际的开发过程中,经常会遇到为TextView添加的需求...,因此就要对原生的TextView进行拓展,使其支持自定义内部和外部颜色的TextView。...(“#000000”)); //设置的颜色(不能与文本颜色一致) 其中strokeTextView为自定义TextView的实例,代码如下: 1.在构造函数中添加 public class StrokeTextView...Color.parseColor("#000000")); strokePaint.setStrokeWidth(4); String text = getText().toString(); //在文本底层画出带文本

    5.4K20

    CSS提高文字的对比度

    WebKit 文本笔画还有更多问题,但也存在问题,因此每个人都像一匹马。 结合 同时使用笔触和阴影会产生很好的效果。让我们继续使用 WebKit 笔画、全方位文本阴影笔画以及更深的文本阴影笔画。...Sam Frysteen 提醒:在“外观”面板中添加一个新笔画并将其移动到文本下方(基本上模仿外部笔画对齐)。 从上到下:内、中、外。 对我来说,只有外部文本笔划对齐看起来有什么好处。...不幸的是,对于 CSS 和 Illustrator 来说,不可更改的默认设置是居中的。解决方案只是不要对笔触边框的厚度过于疯狂,一切都应该没问题。...注意:text-shadow-only解决方案没有这个问题,但也不能超过1px的。 如果您使用伪元素,您可以在原始文本后面相同的文本,而在外边有点假。...我们有一整篇关于这个对齐问题的文章:文本笔触:与你卡在中间。一个小小的好消息,该paint-order属性允许您基本上拥有外部设置笔画,一旦更多浏览器支持它。

    1.4K30

    一篇文章带你了解SVG fill 属性

    填充是您可以为任何SVG形状设置的基本SVG CSS属性之一。 一、Fill SVG形状的填充是形状轮廓内的填充。 定义了一个使用蓝色(#0000ff)填充颜色但没有颜色的圆。 <!...二、填充和示例 可以将SVG笔触和填充颜色组合为SVG形状。 示例 使用较深的蓝色(#000066)颜色和较浅的蓝色(#3333ff)填充颜色定义圆。 <!...1. fill-opacity SVG CSS属性 fill-opacity 用于设置形状的填充颜色的不透明度。fill-opacity 使用介于0和1之间的数值。值越接近0,填充越透明。...请注意 右圆圈后面的文本比左圆圈后面的文本更不可见。那是因为右圆fill-opacity比左圆高。 2. fill-rule fill-rule决定的复杂形状的填充方式。...三、总结 本文基于Html基础,讲解了有关SVG中的fill属性,对于fill 填充属性中常见的属性,fill-opacity,fill-rule,属性。

    4.9K10

    哪些你知道或不知道的css,在这里或许都齐全

    合理使用简写 合理使用简写,是一种良好的防卫性编码方式,可以抵御未来的风险; css小技巧 为什么说能使用html/css解决的问题就不要使用JS呢?...但是她们都需要我们添加额外的元素,或者大量的代码来污染我们的结构 解决方案:box-shadow,outline box-shadow: 添加一个或多个阴影; inset : 默认阴影在边框外。...如果你只需要两层,那就可以设置一层常规的边框,再加上outline()属性来产生内外层边框; 例如我们常见的: outline: 是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 outline-style...边框内圆角 有时候我们需要一个容器,只有内侧有圆角,边框或者的四个角在外部仍然保持直角形状 解决方案:box-shadow和outline结合 实现原理: outline()不会跟着元素的圆角走...(因而显示直角);box-shadow却是会跟着元素走的;,两者相结合,box-shadow会填补和容器圆角之间的空隙; 试一试 5.

    1.4K20

    哪些你知道或不知道的css,在这里或许都齐全 css编码技巧 css小技巧

    css小技巧 为什么说能使用html/css解决的问题就不要使用JS呢?...但是她们都需要我们添加额外的元素,或者大量的代码来污染我们的结构 解决方案:box-shadow,outline box-shadow: 添加一个或多个阴影; inset : 默认阴影在边框外...如果你只需要两层,那就可以设置一层常规的边框,再加上outline()属性来产生内外层边框; 例如我们常见的: ?...边框内圆角 有时候我们需要一个容器,只有内侧有圆角,边框或者的四个角在外部仍然保持直角形状 解决方案:box-shadow和outline结合 实现原理: outline()不会跟着元素的圆角走...(因而显示直角);box-shadow却是会跟着元素走的;,两者相结合,box-shadow会填补和容器圆角之间的空隙; ?

    1.7K10

    css3基础知识——回顾

    css3巩固学习       css3巩固学习     结果:第一个和第三个文本会变红 首字符匹配选择器...选择器用于选取指定选择器的首行 :first-line   伪元素像文本的第一个字母添加特殊样式:first-letter   选择器匹配被用户选取的选择部分::selection     示例:       ...文字text-stroke     语法 :text-stroke: ||         text-stroke-width...文字的厚度         text-stroke-color 文字的颜色     示例:                p{font-size: 40px; color...: yellow; -webkit-text-stroke:1px red;}              文字效果     结果:文字添加了红色的

    91570

    SVG基础知识

    写在前面 之前有提到过SVG动画,可以实现很神奇的手写签名动画效果,当然,理论上可以用来实现任意不规则路径填充动画 在支持SVG的场景,可以考虑采用强大的SVG动画,能够实现一些incredible...效果,在处理不规则、填充动画方面疗效确切 一.兼容性 SVG(Scalable Vector Graphics)是一种基于XML的标记语言,用来描述二维矢量图 基础兼容性(Can I use SVG...Use Icon Fonts Inline SVG vs Icon Fonts [CAGEMATCH] SVG Fallbacks 2.动画 SVG结合animation能够实现很多神奇的效果: 不规则动画...,与上例多边形没有任何区别,这里用fill去掉填充色,用stroke添上黑色 2.path 通用形状定义,可以用来实现上面提到的所有形状,例如: <path d="M 10 10 L 100 10...支持的样式属性,SVG还支持一些特有的,例如stroke、fill等等,常见的如下: fill 填充色,<em>文本</em>颜色也由该属性控制 stroke <em>描</em><em>边</em>颜色

    2.1K20

    谁说不能用代码实现酷炫的文字特效?

    而在CSS3流行的当下,我们可以直接使用CSS3的text-shadow属性来制作阴影,以达到不使用图片也能给文字增加质感的效果,而这个属性主要有两个作用,产生阴影和模糊主体。...现在的很多项目中,CSS3的很多属性都在被前端工程师使用,如下图的这些效果就是通过text-shadow而得到的效果。 ?...5)效果 效果就好比把一个硬币放在白纸上,然后用笔去沿着硬币边缘画出来的那个圈,把这个效果作用到文本中,如下: .wrap div:nth-child(8) { color: #fff;...使用text-shadow制作效果跟直接使用Photoshop相比,效果上会有点差别,因为代码实现的主要运用的是两个阴影,第一组值向左上投影,第二组值向右下投影,这时候在某些文字上可能会出现断点...当然在使用上,还是可以使用这种写法来达到所需要的特殊效果的。但是有个注意点,制作的阴影效果不设置模糊值。 6)3D文字 3D效果是可视化程度最好的,能够给人一个空间感。

    2.4K30

    你未必知道的49个CSS知识点

    【负距】?负距的效果。注意左右负距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...css绘制彩带的原理 ? 19.【隐藏文本】?隐藏文字内容的两种办法 ? 20.【居中】?实现居中的一种简单方式 ? 21.【角渐变】?新的渐变:角渐变。可以用来实现饼图 ? 22....background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...CSS自定义属性的简单使用 ? 36【min-content/max-content】?

    1.3K20
    领券