利用放射性渐变实现css3渐变色边框

最新推荐文章于 2024-05-14 11:13:25 发布

prototypeChain

最新推荐文章于 2024-05-14 11:13:25 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_36722175/article/details/76062727

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前渐变色边框我一直都是用的border-image，但是只有两条边，如果是4条边的话可以用
radial-gradient放射性渐变尝试一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css3渐变色边框</title>
        <style type="text/css">
            .wrap {
                width: 400px;
                height: 400px;
                background-image:radial-gradient(blue,white);
                padding:1px;
            }
            .inner {
                background-color: rgba(255,255,255,1);
                width: 400px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="" class="wrap">
            <div id="" class="inner" >              
            </div>
        </div>
    </body>
</html>

这个方法还是有缺点，当背景是深色的时候效果不明显，还需要额外套一层div，而且我始终觉得应该有更简单，不知道有没有大神指教一下。
这里写图片描述

prototypeChain

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用放射性渐变实现css3渐变色边框

之前渐变色边框我一直都是用的border-image，但是只有两条边，如果是4条边的话可以用 radial-gradient放射性渐变尝试一下。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css3渐变色边框</title> <style type="text/css"
复制链接

扫一扫

专栏目录