文章/答案/技术大牛

发布

社区首页 >问答首页 >使IE文本阴影多边形填充与现代化一起使用

问使IE文本阴影多边形填充与现代化一起使用
EN

Stack Overflow用户

提问于 2011-09-06 01:29:16

回答 4查看 5K关注 0票数 3

我正在尝试让一个小的多边形填充(https://github.com/heygrady/textshadow)在I浏览器上添加文本阴影效果，但似乎想不出如何让它工作。这是我使用的代码：

<script src="@Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"></script>
<script>
    Modernizr.load({
        test: Modernizr.textshadow,
        nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
        complete: function () {
            $('h1').textshadow('1px 1px 2px #111')
        }
    });
</script>

我确实得到了一个效果，但它看起来都错了。我只是再次使用原始标题文本，格式与原始文本完全相同，但向底部偏移了半行高。

编辑:经过一些实验，我发现我至少可以通过手动创建类的CSS规则来获得阴影效果，而不是依赖javascript来实现，如下所示：

h1 .ui-text-shadow-copy 
{
    color: #111; /* color */
    filter:
        progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
    left: 0px; /* left - blur */
    top: 0px; /* top - blur */
}

但定位仍然是混乱的。在左侧0px和顶部0px的情况下，阴影放置在文本下方半行。与其他任何东西一样，阴影的碎片散布在页面周围。

css

javascript

internet-explorer

modernizr

回答 4

Stack Overflow用户

发布于 2012-04-10 03:16:50

我让它正常工作，但我必须覆盖.textshadow方法中的css样式才能使它看起来正确。以下是对我有效的方法：

支持文本阴影的浏览器的CSS：

.ts {
  text-shadow: 2px 2px 2px #111111;
  -moz-text-shadow: 2px 2px 2px #111111;
  -webkit-text-shadow: 2px 2px 2px #111111;
}

Modernizr.load：

Modernizr.load([
    {// load jquery
       load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
       complete: function () {
            if (!window.jQuery) {
                Modernizr.load('/TimeTracker/Scripts/jquery-1.7.1.min.js');
            }
    }
    },
    {//other scripts that depend on jquery, including jquery ui
        load: ['some.js','some.other.js']
    },
    {
       test: Modernizr.textshadow,
       nope: ['/url/to/jquery.textshadow.css','/url/to/jquery.textshadow.js']
    },
    '/url/to/file/that/contains/document.ready.js'
]);

document.ready.js：

var m = window.Modernizr;

function loadJqueryTextshadow() {
    $('.ts').textshadow('2px -12px 2px #111111');
}

$(function(){
    if (!m.textshadow) {
        loadJqueryTextshadow();
    }
}

最终的结果足够接近，以至于大多数用户永远不会知道IE、Chrome和Firefox之间的区别。

票数 2

Stack Overflow用户

发布于 2011-09-16 20:36:00

尝试使用微软的DropShadow css过滤器：

h1 .ui-text-shadow-copy {
  filter: progid:DXImageTransform.Microsoft.DropShadow(Color=#111111, OffX=1, OffY=1);
}

其中：

颜色是阴影的RGB值
Offx-阴影偏移的像素x
Offy -阴影偏移y

的像素

票数 0

Stack Overflow用户

发布于 2011-09-20 12:50:15

答案很简单:忘记IE中的text-shadow。没有任何可用的东西可以渲染到足够接近其他浏览器。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7311133

复制

相似问题

问使IE文本阴影多边形填充与现代化一起使用
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使IE文本阴影多边形填充与现代化一起使用EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使IE文本阴影多边形填充与现代化一起使用
EN