用css设置背景以及边框渐变

最新推荐文章于 2024-03-05 17:26:49 发布

卡夫卡的小熊猫

最新推荐文章于 2024-03-05 17:26:49 发布

阅读量783

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43641110/article/details/119733855

版权

1.设置背景颜色的渐变

颜色的渐变可以通过改变背景颜色透明度来实现，（不建议使用opacity属性来实现背景颜色的透明度，因为如果给父元素设置了透明度，之后的子元素的幽冥毒也会被影响），使用rbga(0,0,0,0)函数来定义颜色的结点。

rbga()函数的第四个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。

linear-gradient 是一种实现线性渐变的属性,功能是控制渐变，特点是线性的进行控制。

书写方式：

（1）Safari、Chrome

background: -webkit-linear-gradient(top, rgba(72, 61, 139, 0)0%,rgba(72, 61, 139, 0.5)33%,rgba(72, 61, 139, 0.5)66%,rgba(72, 61, 139, 0)98%);

（2）Opera

background: -o-linear-gradient(bottom, rgba(72, 61, 139, 0)0%,rgba(72, 61, 139, 0.5)33%,rgba(72, 61, 139, 0.5)66%,rgba(72, 61, 139, 0)98%);

（3）Firefox

background: -moz-linear-gradient(bottom,rgba(72, 61, 139, 0)0%,rgba(72, 61, 139, 0.5)33%,rgba(72, 61, 139, 0.5)66%,rgba(72, 61, 139, 0)98%);

（4）标准的语法

background: linear-gradient(to left, rgba(72, 61, 139, 0)0%,rgba(72, 61, 139, 0.5)33%,rgba(72, 61, 139, 0.5)66%,rgba(72, 61, 139, 0)98%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        .back{
            width: 800px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            background: linear-gradient(to left, rgba(72, 61, 139, 0)0%,rgba(72, 61, 139, 0.5)33%,rgba(72, 61, 139, 0.5)66%,rgba(72, 61, 139, 0)98%);
         
        }
        
        .box{
            width: 450px;
            margin: 10px auto;
            height: 80px;
            display: flex;
            justify-content: space-around;
        }
        .box div{
            width: 120px;
            height: 80px;
        }
        .box div img{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="box">
            <div>
                <img src="./images/平衡补丁.jpg" alt="">
            </div>
            <div>
                <img src="./images/平衡补丁.jpg" alt="">
            </div>
            <div>
                <img src="./images/平衡补丁.jpg" alt="">
            </div>
        </div>
        
    </div>
</body>
</html>

2.边框的渐变

这个方法是用padding内边距来实现边框的渐变色，渐变的原理和设置背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;/*取消列表的样式*/
        }
        .res{
            width:300px;
            height: 100px;
            margin: 0 auto;
        }
        .res ul{
            display: flex;
            justify-content:space-around;
        }
        .res li{
            width: 100px;
            padding: 4px;
            height: 50px;
            background: linear-gradient(#bcaecf,#477fce);
            cursor:pointer;
            border-radius: 20%;
        }
        .res a{
            height: 100%;
            display: block;
            border-radius: 20%;
            background-color:rgb(173, 109, 233);
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="res">
        <ul>
         
          <li><a>登录</a></li>
          <li><a>注册</a></li>
        </ul>
      </div>
</body>
</html>

卡夫卡的小熊猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用css设置背景以及边框渐变

1.设置背景颜色的渐变颜色的渐变可以通过改变背景颜色透明度来实现，（不建议使用opacity属性来实现背景颜色的透明度，因为如果给父元素设置了透明度，之后的子元素的幽冥毒也会被影响），使用rbga(0,0,0,0)函数来定义颜色的结点。 rbga()函数的第四个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。linear-gradient 是一种实现线性渐变的属性,功能是...
复制链接

扫一扫