css 颜色渐变的方法

线性渐变

background-image:linear-gradient();
注意，颜色之间用逗号分开
1从上到下的线性渐变(默认)
css:

div{width: 200px;height:200px;margin: 0 auto;background-image: linear-gradient(red, orange);
}

运行图：

2.从左到右的线性渐变
css:
background-image: linear-gradient(to right,red, orange);

运行图：

3.从左上角到右下角的线性渐变
css:
background-image: linear-gradient(to bottom right,red, orange);

运行图：

4.使用角度
角度方向：

css:
background-image: linear-gradient(90deg,red, orange);
运行结果跟background-image: linear-gradient(to right,red, orange);相同

径向渐变

background-image:radial-gradient(red,orange,white);
颜色顺序为从内到外的
运行图：

边框渐变

css:

div{width: 200px;height:200px;margin: 0 auto;border: 30px solid;/* 径向边框渐变 *//* border-image:-webkit-radial-gradient(green,blue,black) 30 30; *//* 线性边框渐变 */border-image:linear-gradient(red,lightyellow,orange) 30 30;
}

运行图

css 颜色渐变的方法相关推荐

CSS 颜色渐变生成器
手工挑选颜色来制作颜色渐变需要设计经验和对色彩和谐的良好理解.如果您需要背景或 UI 元素的渐变,但又没有足够的信心自己处理任务(或者如果您很着急),则 Color gradient generato ...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54 来源:亿速云阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
CSS -- 颜色渐变
CSS -- 颜色渐变 FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='lightblue', endColorSt ...
html中渐变怎么写,css颜色渐变怎么写？
CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class.ID或JavaScript. css颜色渐变可以使用css3的渐变(gradient ...
css 颜色渐变 Gradient
原文:http://www.w3cplus.com/content/css3-gradient CSS3 Gradient 作者:大漠日期:2011-04-21 点击:35374 gradient ...
css颜色渐变移动,CSS颜色渐变
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
web CSS 颜色渐变代码
#onlines{color:#ffffff;border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; backgro ...
css怎么设置字体颜色渐变
css设置字体颜色渐变的方法:1.使用"background-cli"和"text-fill-color"实现字体颜色渐变:2.使用"mask-ima ...
CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...

css 颜色渐变的方法

线性渐变

径向渐变

边框渐变

css 颜色渐变的方法相关推荐

最新文章

热门文章