CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS Webkit掩码图像添加大纲/边框?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在彩色背景上使用带有png文件的-webkit-mask-box-image来获得我想要的任何颜色的形状,而不必在每种颜色中都有文件.
BACkground-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");

我将使用更复杂的形状,jsfiddle中的六边形只是一个例子:

http://jsfiddle.net/TtR3b/

有没有简单的方法可以为结果形状添加轮廓?我希望有一些属性或方法允许这个或者有一些方法来操纵蒙版图像以允许轮廓?

我试过这个,但任何添加的东西都只是掩模的一部分,即使轮廓是不同的颜色.我唯一的另一个选择是覆盖一个额外的图像,其中只包含我想要的轮廓,但如果有更好的方法,这似乎很浪费.

解决方法

所以我能够使用第一个后​​面的第二个图像,略大一些.

HTML

<div id="maskborder">
    <div id="mask"></div>
</div>

CSS

#mask{
    position:absolute;
    width: 98%;
    height:98%;
    top:1%;
    left:1%;
    BACkground-color: blue;
    -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

#maskborder{
    position:absolute;
    width: 50%;
    height:50%;
    BACkground-color: red;
    -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

编辑:http://jsfiddle.net/TtR3b/2/

大佬总结

以上是大佬教程为你收集整理的CSS Webkit掩码图像添加大纲/边框?全部内容,希望文章能够帮你解决CSS Webkit掩码图像添加大纲/边框?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。