让两个div在一行显示，并加上颜色渐变边框

潮汐未见潮落

已于 2022-06-20 09:55:09 修改

阅读量1.4k

点赞数

分类专栏： HTML与CSS 文章标签： css3 css html

于 2022-05-13 19:32:23 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/124758206

版权

HTML与CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言：

下面实现的效果是让一个大的div里的两个小div同行显示出来，并给它们加上颜色渐变边框，可以用来展示图片旁边配文字的样式。

清除浮动

div是块状元素，通常情况下独占一行，那么就需要使用float属性

<!DOCTYPE html>
<html lang="en">
<head>
    <title>float</title>
    <style>
        .home{
             /* 清除浮动 */
            overflow: hidden;
        }
        .text{   
            float: left 
            }
        .image{  
             float: left; 
            }
    </style>
</head>
<body>
    <div class="home">
        <div class="text">  </div>
        <div class="image"> </div>
    </div>
</body>
</html>

给子组件加上float属性可以让它们在同一行内，left 表示向左浮动

记住父组件一定要清除浮动，要加上 overflow: hidden;

这里展示的文字和图片是我自己随便找的

文字：

传智播客UI设计学院

”UI设计师(简称UID)“已经成为全球性知名IT企业招聘最热门的岗位，正逐渐成为大学毕业生所追捧的热门职业方向。传智播客UI设计学院花一份钱同时学习四门技术，针对平面设计、网页设计、UI设计、Web前端培训一步到位，让你从小白变大神，高薪就业！

图片：

设置颜色渐变边框

在css中可以利用 border-image 属性和 linear-gradient() 函数来写一个渐变的边框。

border-image 属性用于设置元素的边框样式，linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

设置边框和渐变

.home{
            /* 清除浮动 */
            overflow: hidden;
            /* 设置边框 */
            border: 20px solid;  
            /* 设置边框颜色渐变 */
            border-image: linear-gradient(red,rgb(216, 104, 38),rgb(189, 32, 32))30 30;
            width: 600px; 
        }

最终效果：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>float</title>
    <style>
        .home{
            overflow: hidden;
            /* 设置边框 */
            border: 20px solid;  
            /* 设置边框颜色渐变 */
           /*  后面的30 30 就是border-image-slice这个参数 具体不明白的可以多查阅多方资料*/
            border-image: linear-gradient(red,rgb(216, 104, 38),rgb(189, 32, 32))30 30;
            width: 600px;
            margin-top: 10%;
            margin-left: 22%; 
        }
        .text{
            width: 250px;
            height: 220px;
            float: left;
        }
        .image{
            padding-left: 10px;
            float: left;
        }
        .title{
            color: #f0923b;
            font-size: 20px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="home">
        <div class="text">
        <div  class="title">传智播客UI设计学院</div>
”UI设计师(简称UID)“已经成为全球性知名IT企业招聘最热门的岗位，正逐渐成为大学毕业生所追捧的热门职业方向。传智播客UI设计学院花一份钱同时学习四门技术，针对平面设计、网页设计、UI设计、Web前端培训一步到位，让你从小白变大神，高薪就业！
        </div>
        <div class="image">
            <img src="https://img-blog.csdnimg.cn/1fdac6adafb04a16a8bd7d9e9d81e69d.png" >
        </div>
    </div>
</body>
</html>