Question

我有一个10px x 1px的PNG，我需要将它用于边框图像，但由于某种原因，图像不会重复。它出现在角落但不是一路走来？我做错了什么？

#border {
  width: 200px;
  height: 100px;
  border: 1px dashed transparent;
  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 100% repeat;
  background: yellow;
  text-align: center;
  line-height: 100px;
}

<div id="border">
  bordered area
</div>

Answer 1

错误的开始，它不是100

 render() {
    const { classes } = this.props;
    let news = this.props.news.map((item, index) =>{
        return (
        <Zoom in={true} timeout={500}>
          <Grid item lg={3} xs={12} sm={12} md={6} lg={4} key={item.uid} spacing={16}>
            <Paper elevation={0} className={classes.paper}>
              <RecipeReviewCard info={item} />
            </Paper>
           </Grid>
        </Zoom>
  )
});

return (
  <div className={classes.root}>
        <Grid container className={classes.root}>
          <Grid item xs={12}>
            <Grid
              container
              spacing={16}
              className={classes.demo}
              alignItems={this.state.alignItems}
              direction={this.state.direction}
              justify={this.state.justify}
            >
            <Hidden xsDown>
              <Grid 
              item 
              lg={2} 
              md={4} 
              style={{
                width: 270, 
                maxWidth: 280, 
                minWidth: 270, 
                position: 'absolute', 
                height: '100%', 
                zIndex: 1
              }}>
                <Categories />
              </Grid>
            </Hidden>
              <Grid container item lg={12} md={12} spacing={16} style={{paddingLeft: 300, zIndex: 0}}
              >
                {news}
              </Grid>
            </Grid>
          </Grid>
      </Grid>
  </div>
  ); 
}

Answer 2

您设置为100％的参数是border-image-width，我认为您希望它为1（或者您可以省略它，我认为它默认为1）。

	<!DOCTYPE html>
	<html lang="en">
		<head>
			<style>
				#border {
					width:200px;
					height:100px;
					border:1px dashed transparent;
					border-image: url(https://image.ibb.co/byABRJ/border.png) 1 1 repeat;
					background:yellow;
					text-align:center;
					line-height:100px;
				}
			</style>
		</head>
		<body>
			<div id="border">
				bordered area
			</div>
		</body>
	</html>

来源：https://www.w3schools.com/cssref/css3_pr_border-image.asp

编辑：如果您希望左/右边缘的边框图像相同，则必须将这些边框图像添加到您正在使用的源图像中。看一下这个https://css-tricks.com/almanac/properties/b/border-image/

Answer 3

您也可以这样使用。

＆＃13;

#border {
   width:200px;
   justify-content: center;
   align-items: center;
   display: flex;
   height:100px;
   border-top:1px dashed blue;
   border-bottom:1px dashed blue;
   background:yellow;
}

＆＃13;

   	<!DOCTYPE html>
    	<html lang="en">
    		<head>
    			<title>Test</title>
    		</head>
    		<body>
    			<div id="border">
    				bordered area
    			</div>
    		</body>
    	</html>

＆＃13;

Answer 4

最后构建一个然后用于边界的CSS的图像证明太耗时。相反，我找到了：

here

并在那里发布了我的解决方案的答案。虽然不能直接解决所提出的问题，但它解决了这个问题，没有图像对我来说更容易。

单行边框图像

4 个答案: