您现在所在位置: 首页 > 新闻中心

挑选婚纱照相框必须了解的小知识

2021-03-31 18:46:50
浏览: 150次 来源:【jake】 作者:-=Jake=-
返回列表

在网页中div中文字添加边框,有时您会看到文本的轮廓带有边缘。这实际上是字体的笔触。过去,您可能需要使用诸如ps之类的工具来描画文本。但是,由于CSS3的问世,文本Stroke无需其他工具即可直接实现,因此本文将与您分享CSS3实现字体笔划的方法。

推荐手册:CSS在线手册

首先华体会登录 ,让我们看一下css3中text stroke的text-stroke属性。

注意:textkit-str属性仅受Webkit核心的Safari和Chrome支持。

语法:文本笔触:||

属性值:

:设置或获取对象中文本的笔触粗细

:设置或获取对象中文本的笔触颜色

让我们直接看一个例子:

PHP中文网文字描边

h1{
    -webkit-text-stroke: 1.0px #000000;
     color:pink
}

css3文本笔划的效果如下:

请注意:

仅当字体较大时,文本笔划的text-stroke属性才能看到笔划效果。如果字体较小div中文字添加边框澳洲幸运10开奖结果 ,则笔触颜色将覆盖文本本身的颜色,如图所示:

实际上,除了使用text-stroke属性实现文本笔划外澳洲幸运10开奖结果 ,您还可以使用text-shadow属性执行文本笔划。 text-shadow属性的具体内容是如何在css3中设置文本阴影?已经介绍了在css3中使用text-shadow设置文本阴影的方法,因此这里不再赘述,因此让我们直接看一下text-shadow属性示例以实现字体笔划:

h1{text-shadow:2px 2px 0px blue;
color:pink;
}

css3文本笔划的效果如下:

注意:如果您感觉文本笔触不够粗,则可以使用多个字体阴影亚洲体育平台亚博app安全有保障 ,以便获得更粗的文本笔触。

css3的粗体文本笔划代码如下:

PHP中文网文字描边

h1{text-shadow:
  1px 1px 0px blue,
  -1px -1px 0px blue,
  2px 2px 0px blue,
  -2px -2px 0px blue,
  3px 3px 0px blue, 
  -3px -3px 0px blue;
color:pink;
}

css3文本笔划的效果如下:

老王


搜索