菜单

PhotoShop简单打造钧瓷龟裂效果

2019年10月6日 - 新京葡娱乐场388官网
PhotoShop简单打造钧瓷龟裂效果

;

CSS3渐变共有3种:(1)线性渐变(linear-gradient);(2)径向渐变(radial-gradient);(3)重复渐变(repeating-linear-gradient);

效果图

线性渐变

语法:background:linear-gradient(方向,开始颜色,结束颜色);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <title>CSS3线性渐变</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:linear-gradient(to right,blue,yellow);

           分析:background:linear-gradient(to right,blue,yellow);表示线性渐变方向为“从左到右”,开始颜色为蓝色blue,结束颜色为黄色yellow
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

新京葡 2

在浏览器预览效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            display: inline-block;
            width:300px;
            height:300px;
        }
        .box{
            background-image:linear-gradient(to right,black 10%, red 20%, green 80%);

        此句表达的意思为:渐变方向为从左到右,0-10%没有渐变显示为black,10%-20%显示为black-red渐变,20%-80%显示为red-green渐变,80%-100%没有渐变显示为green
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

新京葡 3

在浏览器预览效果

新京葡 4

径向渐变

语法:background:radial-gradient(position ,shape size,start-color,stop-color)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*设置div公共样式*/
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1
        {
            margin-bottom:10px;
            background:-webkit-radial-gradient(orange,blue); 
        }
        #div2
        {
            background:-webkit-radial-gradient(top,orange,blue);
        }
    </style>
</head>
<body>
    <div id="div1">默认值(center)</div>
    <div id="div2">top</div>
</body>
</html>

新京葡 6

在浏览器预览效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*设置div公共样式*/
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1
        {
            margin-bottom:10px;
            background:-webkit-radial-gradient(orange,blue);
        }
        #div2
        {
            background:-webkit-radial-gradient(circle,orange,blue);
        }
    </style>
</head>
<body>
    <div id="div1">默认值(ellipse)</div>
    <div id="div2">circle</div>
</body>
</html>

新京葡 8

在浏览器预览效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*设置div公共样式*/
        div
        {
            width:120px;
            height:80px;
            line-height:80px;
            text-align:center;
            color:white;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
        #div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
        #div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
        #div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
    </style>
</head>
<body>
    <div id="div1">closest-side</div>
    <div id="div2">closest-corner</div>
    <div id="div3">farthest-side</div>
    <div id="div4">farthest-corner</div>
</body>
</html>

新京葡 10

在浏览器预览效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:-webkit-radial-gradient(red,orange,yellow,green,blue);
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

新京葡 11

在浏览器预览效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
        #div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}

        此句表达的意思为:默认为椭圆形,圆心点0-10%没有渐变显示为black,10%-20%显示为black-red渐变,20%-80%显示为red-green渐变,80%-100%没有渐变显示为green
    </style>
</head>
<body>
    <div id="div1">颜色均匀分布</div>
    <div id="div2">颜色不均匀分布</div>
</body>
</html>

新京葡 12

在浏览器预览效果

步骤:1、新建一空白图层,然后使用渐变工具作径向渐变,如图所示:注意,参数见红色箭头。

重复渐变

repeating-linear-gradient    重复线性渐变
repeating-radial-gradient    重复经向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 400px;
            background-image: repeating-linear-gradient(to bottom,orange 0,green 20px);
        }
    </style>
</head>
<body>
    <div class="box box01"></div>
</body>
</html>

新京葡 13

线性渐变未重复

新京葡 14

线性渐变重复

新京葡 15

CSS渐变一些小实例

径向渐变-关键词表示半径大小
CSS3径向渐变制作圆形图标按钮
CSS3重复渐变制作纹理图案
径向渐变-使用关键字表示圆心的位置
线性渐变制作的按钮
CSS3线性渐变-angle用角度设置渐变方向

2、点击:滤镜—像素化—晶格。如图,参数自己选定。

新京葡 16

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图