根据css3情况操纵特性+应用色调过渡完成渐变色实

日期:2020-10-14 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

css3情况图象有关

适配性:IE9+

background-clip 情况照片绘图地区

background-clip:border-box; 內容区

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:content-box;
        /*background-clip:padding-box;*/
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:padding-box; padding地区

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:padding-box;
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:border-box; border地区

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-origin: content-box | padding-box | border-box; 情况照片起止部位

情况照片从border-box刚开始水平竖直向下偏位50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:padding-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

情况照片从padding-box刚开始水平竖直向下偏位50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:content-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

情况照片从content-box刚开始水平竖直向下偏位50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*宽度为器皿宽度的100%,高宽比按照片占比来*/
        background-size:100% 100%;/*宽度为器皿宽度的100%,高宽比为器皿高宽比的100%*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-size: 填写标值或百分比时,假如只填写1个值,另外一个值默认设置为auto

cover 等比放缩铺满器皿

contain 等比放缩至1边碰到器皿边

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*宽度为器皿宽度的100%,高宽比按照片占比来*/
        background-size:100% 100%;/*宽度为器皿宽度的100%,高宽比为器皿高宽比的100%*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

多种情况照片

background-image:url(),url();

前面的照片会遮盖后边的照片

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background-image:url(source/shuiyin.png), url(source/cat.jpg);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

色调设定为全透明:transparent

css3渐变色

适配性:IE10

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(pink, orange, #abcdef);/*默认设置是竖直方位*/
        background:   -moz-linear-gradient(pink, orange, #abcdef);/*默认设置是竖直方位*/
        background:     -o-linear-gradient(pink, orange, #abcdef);/*默认设置是竖直方位*/
        background:        linear-gradient(pink, orange, #abcdef);/*默认设置是竖直方位*/

        background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*从左到右*/
        background:   -moz-linear-gradient(right, pink, orange, #abcdef);
        background:     -o-linear-gradient(right, pink, orange, #abcdef);
        background:        linear-gradient(to right, pink, orange, #abcdef);

        background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*从左上到右下*/
        background:   -moz-linear-gradient(right bottom, pink, orange, #abcdef);
        background:     -o-linear-gradient(right bottom, pink, orange, #abcdef);
        background:        linear-gradient(to right bottom, pink, orange, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

一切正常状况下线形渐变色的角度

webkit核心下线形渐变色的角度

处理方式:适配访问器的前缀按序撰写,一切正常状况下无前缀的放在最终

色调能够实际分派部位

第1个色调不写默认设置是0%的部位;最终1个色调默认设置是100%的部位

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*实际角度表明*/
        background:   -moz-linear-gradient(45deg, pink, orange, #abcdef);
        background:     -o-linear-gradient(45deg, pink, orange, #abcdef);
        background:        linear-gradient(45deg, pink, orange, #abcdef);

        background:-webkit-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:   -moz-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:     -o-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:        linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

rgba() 能够设定带全透明色的渐变色

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*实际角度表明*/
        background:   -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:     -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:        linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

反复渐变色

repeating-linear-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:   -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:     -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:        repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

轴向渐变色 radial-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(pink, #abcdef);
        background:   -moz-radial-gradient(pink, #abcdef);
        background:     -o-radial-gradient(pink, #abcdef);
        background:        radial-gradient(pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

维持圆形渐变色

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

规格尺寸 closest-side closest-corner farthest-side farthest-corner

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        border-radius:50%;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-side circle, pink, #abcdef);
        background:        radial-gradient(closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-corner circle, pink, #abcdef);
        background:        radial-gradient(closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-side circle, pink, #abcdef);
        background:        radial-gradient(farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

设定渐变色的圆心部位

水平方位为宽度的10%,竖直方位为高宽比的20%

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

repeating-radial-gradient 反复轴向渐变色

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

IE访问器渐变色

IE10+ 适用gradient 渐变色

IE6⑻ 应用filter

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

应用IE操纵台可切换IE访问器版本号

IE filter

0 从左到右线形渐变色

1 从上到下线形渐变色

具体实例:

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    div{
        width: 600px;
        height: 300px;
        background-color:#abcdef;
        background-size:100px 100px;
        background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(⑷5deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(45deg, transparent 75%, pink 75%),
                         -webkit-linear-gradient(⑷5deg, transparent 75%, pink 75%);
        background-image:-moz-linear-gradient(45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(⑷5deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(45deg, transparent 75%, pink 75%),
                         -moz-linear-gradient(⑷5deg, transparent 75%, pink 75%);
        background-image:-o-linear-gradient(45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(⑷5deg, pink 25%, transparent 25%),
                         -o-linear-gradient(45deg, transparent 75%, pink 75%),
                         -o-linear-gradient(⑷5deg, transparent 75%, pink 75%);
        background-image:linear-gradient(45deg, pink 25%, transparent 25%),
                         linear-gradient(⑷5deg, pink 25%, transparent 25%),
                         linear-gradient(45deg, transparent 75%, pink 75%),
                         linear-gradient(⑷5deg, transparent 75%, pink 75%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>