Fe-interview: [css] 第188天 用css给一个元素加边框有哪些方法?

Created on 20 Oct 2019  ·  2Comments  ·  Source: haizlin/fe-interview

第188天 用css给一个元素加边框有哪些方法?

css

Most helpful comment

:scope {
  border: 3px solid black;

  box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/

  outline: 1px solid black; /*不支持圆角*/

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' stroke='%23000' fill='transparent'/%3E%3C/svg%3E");

  background-clip: content-box; /*形成透明边框*/
  padding: 1px;

  border-image: linear-gradient(red, black) 1;
  border: 1px solid;
}

All 2 comments

:scope {
  border: 3px solid black;

  box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/

  outline: 1px solid black; /*不支持圆角*/

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' stroke='%23000' fill='transparent'/%3E%3C/svg%3E");

  background-clip: content-box; /*形成透明边框*/
  padding: 1px;

  border-image: linear-gradient(red, black) 1;
  border: 1px solid;
}
/*1*/
.box{
  border: 1px solid #000;
}
/*2*/
    .box{
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: relative;
    }
    .box::after{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 1px solid #000;
    }
Was this page helpful?
0 / 5 - 0 ratings