HTML5圆形线性渐变,css中linear-gradient()函数是干什么的?实现线性渐变的圆形边框(代码)...

在前端开发过程中,有时会利用linear-gradient实现各种各样的效果,本章给大家介绍css中linear-gradient()函数是干什么的?实现线性渐变的圆形边框(代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、css linear-gradient()是什么?

1.定义

css linear-gradient函数,用于创建一个线性渐变的 "图像"。

2.用法

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

例(指定3种终止色):background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */

background: linear-gradient(red,yellow,blue); /* 标准语法 */

效果图:

b30a00a30136e454fb332519f5d46001.png

例子里没有指定一个方向来实现线性渐变,因此是默认的从上而下来实现效果,也可以指定一个方向(角度)来实现效果,例:

指定一个方向(从左往右):background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */

background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */

3102a23c37abc2fdb115a353d60a5e12.png

指定一个方向(45度角):background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */

028a230a7df8c8721dd6c3ae1435b5d0.png

同时,也可以实现渐变透明的效果(定义一个透明度):background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/

background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/

background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/

background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/

16a8b88ec6a62876a88ea68681009eb8.png

二、css设置 线性渐变的圆形边框(代码)

原理:

先制作两个的正方形,大小不一,叠加在一起

d32f61fe5134913eb6e7074a73b868b4.png

使用边框圆角属性:border-radius设置边框的圆角度为100%

63e2724d1e5079057278a7af9d1fb78c.png

在使用linear-gradient()添加外围圆形的渐变色,就制作成了:

94617ef9d07a41fec5ec28ffbf22f3d0.png

代码:

边框渐变的圆形

.border1{

width: 200px;

height: 200px;

margin:100px auto;

position: relative;

border: 1px solid transparent;

border-radius: 100%;

background: white;

background-clip: padding-box;

padding: 10px;

}

.border1::after{

position: absolute;

top: -40px;

bottom: -40px;

left: -40px;

right: -40px;

background: linear-gradient(45deg,red, blue);

content: '';

z-index: -1;

border-radius: 100%;

}

实例很简单,大家可以动手实践一下,也可以在这个基础上做出修改,比如:半圆.....

  • 0
    点赞
  • 2
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值