CSS字体边框?

Wesley13
• 阅读 691

随着所有新的CSS3边框填充( -webkit ,...),现在是否可以为字体添加边框? (就像蓝色的Twitter徽标周围的纯白色边框一样)。 如果不是,是否有任何不太丑陋的骇客会在CSS / XHTML中完成此任务,还是我仍然需要启动Photoshop?


#1楼

要详细说明提到-webkit-text-stroke的一些答案,下面是使它起作用的代码:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

在深入的文章有关使用文本行程是在这里和浏览器的列表,支持文字笔画是在这里


#2楼

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

#3楼

我曾经尝试用css3做那些圆角和阴影。 后来,我发现它仍然受支持不佳(当然是Internet Explorer!)

我最终尝试在JS(带有IE Canvas的HTML canvas)中执行此操作,但是它对性能的影响很大(即使在我的C2D机器上也是如此)。 简而言之,如果您确实需要这种效果,请考虑使用JS库(它们中的大多数应该都可以在IE6上运行),但由于性能问题,请不要过分这样做; 如果仍然需要替代方案,则可以使用SFiR,然后使用PS和SFiR。 CSS3今天还没有准备好。


#4楼

似乎有一个“ text-stroke”属性,但(至少对我而言)它仅在Safari中有效。

http://webkit.org/blog/85/introducing-text-stroke/


#5楼

您可能使用CSS text-shadow (或-webkit-text-shadow / -moz-text-shadow )和非常低的模糊度来_模拟_文本笔划:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

但是,尽管它比-webkit-text-stroke属性更广泛地提供,但我怀疑您的大多数用户都可以使用它,但这可能不是问题(优美的降级以及所有这些)。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Wesley13 Wesley13
3年前
CSS常用样式(二):绘制双箭头
序言:总结一些常用CSS样式,方便以后使用目录一、多次调用单箭头二、旋转边框直接绘制双箭头一、多次调用单箭头上文介绍2种实现单箭头的方式:边框旋转、双三角覆盖。这次以边框旋转为例多次调用实现双箭头1、边框旋转单箭头实现.arrowright{
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
达里尔 达里尔
11个月前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这