能否在html实现文字描边效果?求代码。最好兼容各大浏览器的。

能否在html实现文字描边效果?求代码。最好兼容各大浏览器的。,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div class="test">文字描边</div>

<style>

.test{ 

color: orange 

font-size: 50px 

text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0 

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0

-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0

}

</style>

</body>

</html>

不兼容IE10以下版本,其它各大浏览器没问题。

给你的 文字 块化 然后加边框样式!~

例子<a>文字</a>

css样式如下

a{ display:blockwidth:宽度你自己定义height:高度你自己定义border:1px soild #ccc}

OK 了

HTML中是不可能设置成空心的 只能通过 CSS文字描边

代码如下

<style type=”text/css”>

body {

font:12px “Verdana”

filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100)

background-color:#3366cc

}

.sizscolor {

font-size:14pxfont-weight:bold

position:absolute

padding:4px

filter:

Dropshadow(offx=1,offy=0,color=blue)

Dropshadow(offx=0,offy=1,color=blue)

Dropshadow(offx=0,offy=-1,color=blue)

Dropshadow(offx=-1,offy=0,color=blue)

color:#fff

}

#english {

font-size:9px

}

</style>

<span id=”english”>This is the prospect of filter - dropshadow.</span>

<br><br>

<div class=”sizscolor “>中文描边效果</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6274329.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存