html – 我们可以将渐变颜色设置为border-bottom属性吗?
发布时间:2020-12-14 19:00:56 所属栏目:资源 来源:网络整理
导读:参见英文答案 CSS3 Gradient Borders14个 我们可以为html块元素的border-bottom属性添加渐变颜色吗? 边界应该类似于此 – 任何人都可以告诉我在CSS3中有可能吗? 我试过这样,但无法让它发挥作用. .border-gradient { border-bottom: 8px solid; -moz-border
参见英文答案 >
CSS3 Gradient Borders14个
我们可以为html块元素的border-bottom属性添加渐变颜色吗? 边界应该类似于此 – 任何人都可以告诉我在CSS3中有可能吗? 我试过这样,但无法让它发挥作用. .border-gradient { border-bottom: 8px solid; -moz-border-image: -moz-linear-gradient(left,rgba(92,7,52,1) 0%,rgba(134,29,84,1) 12%,rgba(255,93,177,1) 47%,rgba(83,30,1) 100%); -webkit-border-image: -webkit-gradient(left top,right top,color-stop(0%,1)),color-stop(12%,color-stop(47%,color-stop(100%,1))); -webkit-border-image: -webkit-linear-gradient(left,1) 100%); -o-border-image: -o-linear-gradient(left,1) 100%); border-image: linear-gradient(to right,1) 100%); } 解决方法
既然答案已经给出,请将此视为信息.
您可以使用background-image而不是border-image在底部绘制渐变. 渐变可以是旧浏览器的图像和年轻浏览器的渐变. 边框图像中使用的渐变尚未完全支持,Firefox似乎仍然不喜欢它. 使用背景填充就像边框站在那里一样. DEMO div { text-align:center; padding-bottom:5px; background: /* gradient can be an image */ linear-gradient( to left,1) 100% ) left bottom #777 no-repeat; background-size:100% 5px ;/* if linear-gradient,we need to resize it */ } 注意,不需要伪元素,你也可以用这种方式绘制每个边界甚至animate them. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |