CSS3实现文字描边的2种方法(小结)_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

兼容问题楼上几位已经提了有一个老办法就是用背景图放文字后面,这样在图片编辑软件中做一张带有描边效果的logo,稍微大于HTML 页中写入的文字大小,这样看上去它有描边,并且语义化你写的滤镜除了兼容问题,也影响速度www.zgxue.com防采集请勿采集本网。

  问题

两个方法:一个直接写CSS但不兼容IE6-8的text-shadow;一个是全兼容但是需要两个文字层的:这是描边文字这是描边文字

    最近遇到一个需求,需要实现文字的描边效果,如下图

你可以把想要的文字栅格化后,按住CTRL+点击缩略图,变为选区后,在菜单里-选择-修改-扩展,这样就新建一层原来图的扩展图层,可以加颜色或做效果都可以了

  解决方法一

进入图层样式的面板后,右侧有很多的功能和属性,选择描边,在前面打对勾,进入描边的编辑框后,你可以在里面调节大小,位置(包括内部,外部,和居中),混合模式,不透明度,最重要的是你的颜色选择,

     首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke

photoshop 给蒙版文字描边的方法: 1、新建一个文档。2、新建一个图层,选择直排文字蒙版工具,选好参数,输入文字。3、这样操作比较不方便。就可以切换成横排输入。4、输入完文字,点击移动工具

    该属性是一个复合属性,可以设置文字宽度和文字描边颜色

5、这时候文字图层就多了一层描边,接着把拷贝的文字图层同样打开描边设置。6、这次拷贝的图层要设置的描边大小,比前面设置的要小一半(意思指排在上方的文字图层设置的参数比下方的文字图层要小,这样

    该属性使用很简单:text-stroke:1px#f00;(1px是文字宽度,#ff是文字描边颜色)

 

    本以为该属性的兼容性会及时止住我微微上扬的嘴角,随后逐渐凝固

    但出乎意料的是大多浏览器已经开始支持该属性,只需要加上前缀-webkit-即可

   Demo

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>text-stroke-文字描边</title> <style> .demo { color: mistyrose; text-align: center; font-family: Verdana; font-size: 30px; font-weight: bold; } .stroke { -webkit-text-stroke: 1px greenyellow; } </style> </head> <body> <div class="demo"> <p>没有添加描边</p> <p class="stroke">添加了字体描边</p> </div> </body></html>

   解决方法二(推荐)

    偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow

     并且text-shadow属性的兼容性更好,也不用加前缀-webkit-

     Demo

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>text-shadow-文字描边</title> <style> .demo { text-align: center; font-family: Verdana; font-size: 30px; font-weight: bold; color: red; } .stroke { text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0; } </style> </head> <body> <div class="demo"> <p>没有添加描边</p> <p class="stroke">添加了字体描边</p> </div> </body></html>

css 模拟文字描边效果2

p{ text-shadow: -1px -1px 0 #4f4d57, 1px -1px 0 #4f4d57, -1px 1px 0 #4f4d57, 1px 1px 0 #4f4d57, 0px 2px 2px rgba(0,0,0,0.6); font-size: 15px; color: #f2f2f2; font-family:"微软雅黑";}

用js很简单啊 在网上有很多 好像JQUERY有这个插件要纯css实现 我实现过阴影 按照那个理论你这个也可以 方法是:每个文字显示三遍然后设置一个文字浮动在另一个文字的上面 位置右下个移动1PX然后设置一个文字浮动在另一个文字的上面 位置右下个反方向移动1PX然后底部的两个文字设置浅灰色好像这个方法可以,理论上 没试过 貌似很内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 纯css3代码实现文字描边
  • 简单掌握css3将文字描边及填充文字颜色的方法
  • css3利用text-shadow属性实现多种效果的文字样式展现方法
  • css3文本阴影text-shadow属性详解
  • css3实现千变万化的文字阴影text-shadow效果设计
  • css3 text-shadow实现文字阴影效果
  • 举例详解css中的text-shadow文字阴影效果使用
  • 用css的text-shadow制作超炫文字效果全攻略
  • css3的文字阴影—text-shadow的使用方法
  • css3基础(rgba、text-shadow、box-shadow、border-radius)
  • CSS实现文字描边,并且兼容常用浏览器
  • 问css如何给文字添加描边效果 白色的字 海蓝色的边 可是我弄的它文字的边有灰色的 我的背景是浅色的 请教
  • 请问如何用css实现字体的描边效果。类似photoshop中文字的描边效果
  • 怎么利用CSS给文字描边,加阴影并且没有锯齿?
  • QLabel可否实现文字描边效果
  • 如图,在PS中怎么实现这种文字效果?有一些文字轮廓,却不是描边加浮雕就能实现的。详细一点,谢谢。
  • 如何给绘制的字体描边
  • photoshop 怎么给蒙版文字描边
  • PS里怎么给字体进行双描边啊?
  • ps里怎样对路径进行描边,求具体步骤。急急急
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3文字描边纯css3代码实现文字描边简单掌握css3将文字描边及填充文字颜色的方法css3利用text-shadow属性实现多种效果的文字样式展现方法css3文本阴影text-shadow属性详解css3实现千变万化的文字阴影text-shadow效果设计css3 text-shadow实现文字阴影效果举例详解css中的text-shadow文字阴影效果使用用css的text-shadow制作超炫文字效果全攻略css3的文字阴影—text-shadow的使用方法css3基础(rgba、text-shadow、box-shadow、border-radius)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分css3设置box-pack和box-align让div里面的元素垂直居中css3 中filter(滤镜)属性使用详解css3媒体查询中device-width和width的区别详解css3 flex实现div内容水平垂直居中的几种方法浅析css3 中的 transition,transform,translate之间css3 中translate和transition的使用方法css3 不定高宽垂直水平居中的几种方式使用 css3 中@media 实现网页自适应的示例代码css3通过scale()、rotate()实现放大、旋转css3属性 line-clamp控制文本行数的使用用css3实现转换过渡和动画效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved