我想为每个边框创建相同的线性渐变.
5种颜色的边框渐变从
transparent to white to black to white to transparent
那样我就有了透明的角落.
如何为所有4个边框执行此操作?
是否可以为边界指定线性渐变?
旁注:它应该在没有太多努力的IE9上运行,否则IE10:P
解决方法
如何使用径向渐变?虽然这只是一个模拟,但您可以看到基本效果.
.outer { vertical-align:top; display:inline-block; height: 100px; width: 100px; position: relative; background: -moz-radial-gradient(center,ellipse cover,rgba(0,1) 1%,1) 50%,0) 90%,0) 99%,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial,center center,0px,100%,color-stop(1%,1)),color-stop(50%,color-stop(90%,0)),color-stop(99%,color-stop(100%,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .inner { height: 90%; width: 90%; position: absolute; left: 5%; top: 5%; background: white; }
<div class="outer"> <div class="inner"> text </div> </div> <div class="outer" style="height:100px; width:200px"> <div class="inner"> text </div> </div>
资源
注意
>不适合< = IE9的项目
原文地址:https://www.jb51.cc/html/232038.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。