• 技术文章 >web前端 >css教程

    css3如何让div边框渐变

    长期闲置长期闲置2021-11-18 17:50:55原创118

    在css中,可以利用“border-image”属性和linear-gradient()函数实现div边框渐变效果,只需要给div元素添加“border-image:linear-gradient(上方颜色,下方颜色);”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3让div边框渐变的方法

    在css中我们可以通过border-images属性来设置元素的边框样式,结合linear-gradient函数,

    linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

    创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

    只需要给div元素添加border-image: linear-gradient(red,blue);样式即可。

    代码示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <style type="text/css"> 
    div{
        width:250px;
        height:250px;
        border:10px solid;
        border-image: linear-gradient(red,blue)30 30;
        }
        </style>
        <div></div> 
    </body>
    </html>

    输出结果:

    1118.24.png

    更多编程相关知识,请访问:编程视频!!

    以上就是css3如何让div边框渐变的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 边框渐变
    上一篇:上下渐变的css怎么写 下一篇:css文字太长怎样用..显示
    php中文网线上培训班

    相关文章推荐

    • css input怎么隐藏光标• 怎么在css中创建一个圆饼并填充颜色• flex是css属性吗• 上下渐变的css怎么写• css样式表有什么特点

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网