HTML渐变
渐变：
线性渐变
background-image: linear-gradient(方向,颜色1,颜色2…)
颜色可以写多个
方向有多种写法
01.默认值从上到下
02.
to left 去到左边从右到左
background-image: linear-gradient(to left, red, yellow);
to right
to top
to bottom默认值
03.
to right top去到石上角从左下角到右上角
to right bottom
to left bottomto left top
4.角度
0deg从下到上
18edeg默认值从上到下
颜色突变
两段颜色在同一个位置
background-image: linear-gradient(red 33.3%, yellow 33.3%, yellow 66.6%, green 66.6%);
二、径向渐变（了解就行）
<style>div{width: 300px;height: 200px;margin: auto;background-image: radial-gradient(red,pink);background-image: radial-gradient(circle,pink,red);background-image: radial-gradient(circle at left,pink,yellow);background-image: radial-gradient(circle at 100px 100px,pink,yellow);background-image: radial-gradient(circle at 50%,pink,yellow);}style>
head>
<body><div>div>
body>
html>
三、重复渐变
<style>.d1{width: 300px;height: 300px;background-image: repeating-linear-gradient(green 5%,yellow 20%);}.d2{width: 400px;height: 400px;background-image: repeating-radial-gradient(green 7%,pink 27%);}style>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！