时间戳

首页 > 解决方案 > CSS/HTML 自定义框架/效果

html - CSS/HTML 自定义框架/效果

问题描述

我试图弄清楚如何创建 div 小部件的自定义外壳。

下面是我提出的代码，我想为其添加自定义框架/效果。可以用 HTML/CSS 完成吗？谢谢您的帮助。

{<div class="container-fluid">
<section class="p-t-3 p-b-2" id="categories">
    <div class="categories">
        <div id="froala-editor">
            <div>
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <div>
                            <h3 style="display: inline-block;">
                                <br>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="row center-block">
                        <div class="col-xs-12 col-sm-6 col-md-3">
                            <div class="category" style='background-image: url("");'>
                                <a class="category-link" href="" rel="noopener noreferrer" target="_blank">
                                    <span class="category-content">
                                        <span class="category-title">Downtown</span>
                                        <span class="category-subtitle">
                                            <span class="btn btn-primary">View Listings</span>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>}

标签： htmlcss

解决方案

您可以使用border-image属性制作自定义边框：

示例：应用边框.container-fluid

.container-fluid {
  border: 10px solid;
  border-image: url(https://source.unsplash.com/aDIDvOG021w/) 30 round;
}

您可以将图像替换为您选择的图像。

代码笔： https ://codepen.io/manaskhandelwal1/pen/RwGYQgR

推荐阅读