如何在 React JS 中的 CSS 中将图像作为边框答案

【问题标题】：How to put image as border in CSS in React JS如何在 React JS 中的 CSS 中将图像作为边框
【发布时间】：2017-04-13 20:25:39
【问题描述】：

import React, { Component } from 'react';

class BigText extends Component {

  constructor(props) {
        super(props);

        this.state = {
            title: '',
            text: '',
            summary: ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

  render() {
 
    return ( 
      <div>
        <div>
          <h1 className="row px-2">Big Text Notification</h1>
          <hr />
          <div className="row px-1 py-2 animated fadeIn">
  
                <div className="px-1" style={{ width:50 + '%' }}><br />

                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Title"
                       name="title"
                       value={this.state.title}
                       onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <textarea 
                      className="form-control" 
                      placeholder="Text"
                      name="text"
                      value={this.state.text}
                      onChange={this.handleInputChange}
                      />
                    </div>

                    <div className="mb-1">
                      <textarea
                       className="form-control" 
                       placeholder="Summary"
                       name="summary"
                       value={this.state.summary}
                       onChange={this.handleInputChange}
                       />
                    </div>

                    <br />

                    <div className="row px-2" >
                      <div>
                        <button className="nav-link btn btn-block btn-info">Save</button>
                      </div>
                      <div className="px-1">
                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                      </div>
                    </div><br />

                </div>
                <div><br />
                  <div className="px-1">
                    <table className="table table-clear table-hover table-striped"
                    >
                      <tbody>
                        <tr>
                          <td>
                            <strong>
                              {this.state.title}
                            </strong><br />
                            {this.state.text}  <br />{this.state.summary}<br /> 
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
          </div>
    </div>
    </div>
    )
    
  }
}

export default BigText;

我想制作一个 CSS，以便将以下图像用作边框，并且每当我输入内容时，它也会被包裹在其中实际上，我想将此 CSS 与 React JS 一起使用，其中左侧输入字段在那里，右侧将在此电话组件中显示为由用户键入

【问题讨论】：

不可能有边框...使用它作为背景图片并在里面包裹一个div使其工作
你能告诉我怎么做吗？在答案中提供 sn-p
你能在你的代码中告诉我哪个 div 会有那个背景吗？
我自己解决了我的问题
stackoverflow.com/questions/43406383/…

标签： javascript css reactjs

【解决方案1】：

.enjoy-css {
  min-width: 410px;
  max-width: 450px;
  border-style: solid;
border-width: 45px 103px 267px 98px;
-moz-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
-webkit-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
-o-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
}

.width-css {
  min-width: 210px;
  max-width: 250px;
    word-break: break-all;
}

这是我想做的事，我成功了

【讨论】：