css3 如何实现圆边框的渐变

使用 css 实现下面效果:





把效果分解.

代码一:

<style>
.helper1 {
height: 40px;
padding: 15px;
background: -webkit-linear-gradient( right, #fff 0%, #000 100%), -webkit-linear-gradient( right, #fff 0%, #74baff 100% );
}
</style>
<div class="helper1"></div>

效果:




原因:
background 如果存在多个 image(gradient) 时, 显示层级是降低的. 即先的越靠前越优先显示.

代码2:

<style>
.helper2 {
height: 40px;
padding: 15px;
background: -webkit-linear-gradient( right, #fff 0%, #000 100%), -webkit-linear-gradient( right, #fff 0%, #74baff 100% );
background-clip: content-box, padding-box;
}
</style>
<div class="helper2"></div>

原因:
background-clip 对 background 进行裁剪.
content-box: background 只显示在内容区.
border-box: background 从 border 位置开始显示.

background 图片(gradient)越向后书写的, 起始位置越渐近 border. 这样后定义的背景不会被先定义的完全覆盖.

重写代码2: 使用白色做背景. 代码3：

<style>
.helper3 {
height: 40px;
padding: 15px;
background: -webkit-linear-gradient( right, #fff 0%, #fff 100%), -webkit-linear-gradient( right, #fff 0%, #74baff 100% );
background-clip: content-box, padding-box;
}
</style>
<div class="helper3"></div>

代码 4：

<style>
.helper4 {
height: 40px;
padding: 15px;
padding-bottom: 0;
width: 100px;
box-sizing: border-box;
border-radius: 50px 50px 0 0;
background: -webkit-linear-gradient( right, #fff 0%, #fff 100%), -webkit-linear-gradient( right, #fff 0%, #74baff 100% );
background-clip: content-box, padding-box;
}
</style>
<div class="helper4"></div>

效果:




原因:
圆一周的效果不同, 因此上下两部分分开实现 - 添加 padding-bottom: 0; 即仅实现上半部分.
设置 width 指定 loading 圆尺寸. 使用 box-sizing 节省计算.
border-radius 把 loading 形状设置成圆.

实现上半部分效果, 下半部分相似. (借助:before/:after伪元素)
效果要求做了 rotate！

最终效果:




补充

对 css3 中 background 属性做下补充.

background-origin

: 背景渲染的起始位置. 支持 value

padding-box; (default)

border-box;

content-box;

background-color 和 background-image: linear-gradient(.... ) 会从 border 处开始,
但由于往往 border 存在 value 而看不到 background。
background-origin 设置为 padding-box 时, gradient 在 border 下面是实色的. 见下图:



代码:

border: 50px solid rgba( 255, 255, 255, 0.1 );
background-image: -webkit-linear-gradient( top, #ffa, #faa );

`background-clip': 背景裁剪. 即用户可看到的背景起始位置. value:

padding-box;

border-box;

content-box;

background-origin: border-box;
background-clip: content-box;

背景从 border-box 开始渲染, 但用户看到的是从 content-box 开始.
即图片会被就隐藏一部分. 而gradient 会发现不是从设置的 start 颜色开始.

'background-size': 背景大小. value:

像素值 - 50px, 100px

百分比 50% /* 以上是对图片做相应缩放 */

cover /* resize 图片, 让最小尺寸方向(width/height)覆盖容器 */

contain /* resize 图片, 让图片覆盖容器, 并且图片正好全部显示 */

补充下 background-repeat.

no-repeat;

repeat

repeat-x;

repeat-y

space

round

space:
重复 image 以适应整个这容器, 但不对 image 做处理
容器不能放下两个 image 时, 仅放一个
容器放2个后, 还有剩余空间时, 空间留中间

round:
会缩放 image, 来适应容器

参考地址 https://github.com/zhanhongtao/blog/issues/43