0

我是使用边框图像属性的新手，我不确定这是否真的是我想要实现的最佳方法。我想为一个看起来像这样的元素创建一个电影卷轴样式的左右边框： 在此处输入图像描述

我在 Bootstrap 中执行此操作，因此一种方法可能是将表单设置为 col-10，然后在左侧和右侧执行 col-1，但是也许有更好的方法可以使用 CSS 执行此操作。

我试图尝试使用边框图像属性，但是我是新手，所以我没有取得太大的成功。下面的代码是我到目前为止所拥有的：

.mainHeading {
    font-size: 130px;
    text-align: center;
    font-family: din-1451-lt-pro-engschrift, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin-top: 80px;
}

.teammateHeader {
    background-color: #5ba676;
}

.teammateHeader .mainHeading {
    text-align: left;
    font-size: 100px;
    padding-left: 15px;
}

.filmBorder {
    border-image-source: url('https://mathstory.org/img/filmSlice.svg');
    border-image-width: 0 90;
    border-image-outset: 1;
    border-style: solid;
    border-image-repeat: repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://use.typekit.net/krg3ekk.css">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>  
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
  
<div class="container form filmBorder">
    <div class="row">
        <div class="col-12 teammateHeader">
            <div class="row">
                <div class="col-lg-9 col-12">
                    <h1 class="mainHeading">Submission</h1>
                </div>
                <div class="col-lg-3 d-lg-block d-none">
                    <img src="https://mathstory.org/img/teammate.svg">    
                </div>
            </div>
        </div>
    </div>
 </div>

4

1 回答 1

0

您也可以使用padding (px-5例如类) 和background/ background-size：

可能的例子：

.mainHeading {
    font-size: 130px;
    text-align: center;
    font-family: din-1451-lt-pro-engschrift, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin-top: 80px;
}

.teammateHeader {
    background-color: #5ba676;
}

.teammateHeader .mainHeading {
    text-align: left;
    font-size: 100px;
    padding-left: 15px;
}

.filmBorder {
    background: 
    url('https://mathstory.org/img/filmSlice.svg') 0 0 repeat-y,
    url('https://mathstory.org/img/filmSlice.svg') 100% 0 repeat-y
    #000;
    background-size:2rem auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://use.typekit.net/krg3ekk.css">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>  
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
  
<div class="container form filmBorder px-5">
    <div class="row">
        <div class="col-12 teammateHeader">
            <div class="row">
                <div class="col-lg-9 col-12">
                    <h1 class="mainHeading">Submission</h1>
                </div>
                <div class="col-lg-3 d-lg-block d-none">
                    <img src="https://mathstory.org/img/teammate.svg">    
                </div>
            </div>
        </div>
    </div>
 </div>

于 2020-10-27T14:23:21.050 回答