可能使用border-radius和具有渐变的border-image？
我正在devise一个具有圆形边框（边框半径）的input框，并尝试向所述边框添加渐变。 我可以成功地制作渐变和圆angular边框，但是不能一起工作。 它可以是无渐变的圆形，也可以是带有渐变的边框，但不包含圆angular。
-webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%; 无论如何都有CSS属性一起工作，或者这是不可能的？
根据W3C规范可能不可能：
一个框的背景，但不是它的边界图像，被剪切到适当的曲线 （由'background-clip'确定）。 剪切到边界或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线上。 replace元素的内容总是被修剪为内容边缘曲线。 此外，边界曲线外的区域不代表元素接受鼠标事件。
这可能是因为border-image可能会采取一些潜在的复杂模式。 如果你想要一个四舍五入的图像边框，你需要自己创build一个。
这是可能的，它不需要额外的标记 ，但是使用::after伪元素 。
它涉及在下面放置一个具有渐变背景的伪元素并剪裁该元素。 这适用于所有当前浏览器没有供应商前缀或黑客（甚至IE），但如果你想支持复古版本的IE浏览器，你应该考虑纯色的后备，JavaScript和/或自定义MSIE CSS扩展（即filter ，CSSPie像向量欺骗等）。
这里有一个实例（ jsfiddle版本 ）：
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'); html { /* just for showing that background doesn't need to be solid */ background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%); padding: 10px; } .grounded-radiants { position: relative; border: 4px solid transparent; border-radius: 16px; background: linear-gradient(orange, violet); background-clip: padding-box; padding: 10px; /* just to show box-shadow still works fine */ box-shadow: 0 3px 9px black, inset 0 0 9px white; } .grounded-radiants::after { position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px; background: linear-gradient(red, blue); content: ''; z-index: -1; border-radius: 16px; }
<p class="grounded-radiants"> Some text is here.<br/> There's even a line break!<br/> so cool. </p>
如果将渐变应用于背景会怎么样？ 比里面添加一个额外的div，边距设置为旧的边框宽度和白色的背景，当然还有borderradius。 这样你有边界的影响，但实际上是使用正确剪辑的背景。
这在WebKit中总是适用于我，尽pipe它有点棘手！
基本上你只是把边框放大一些，然后用更大更小的伪元素边框将其掩盖起来：）。
.thing { display: block; position: absolute; left: 50px; top: 50px; margin-top: 18pt; padding-left: 50pt; padding-right: 50pt; padding-top: 25pt; padding-bottom: 25pt; border-radius: 6px; font-size: 18pt; background-color: transparent; border-width: 3pt; border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch; } .thing::after { content: ''; border-radius: 8px; border: 3pt solid #fff; width: calc(100% + 6pt); height: calc(100% + 6pt); position: absolute; top: -6pt; left: -6pt; z-index: 900; } .thing::before { content: ''; border-radius: 2px; border: 1.5pt solid #fff; width: calc(100%); height: calc(100% + 0.25pt); position: absolute; top: -1.5pt; left: -1.5pt; z-index: 900; }
我会用这个SVG：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none"> <defs> <linearGradient id="gradient"> <stop offset="0" style="stop-color:#0070d8" /> <stop offset="0.5" style="stop-color:#2cdbf1" /> <stop offset="1" style="stop-color:#83eb8a" /> </linearGradient> </defs> <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /> </svg>
这个select是相当新的： https ： //github.com/bfintal/jQuery.IE9Gradius.js
只要将脚本包含在头标中，就可以处理其余的内容。 请参阅自述文件
