css+div實現各種常見邊框

css+div實現各種常見邊框

一、效果圖如下

 

 

二、實現代碼

div {
      width: 120px;
      height: 100px;
      margin: 10px;
      float: left;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      color: #999999;
      border: 4px solid #797979;
    }

    .rounded {
      border-radius: 30px;
    }

    .asymmetric-radius {
      border-radius: 30px / 90px;
    }

    .percentages {
      border-radius: 50%;
    }

    .brackets {
      border-top: none;
      border-bottom: none;
      border-radius: 30px / 90px;
    }

    .inner-brackets {
      border-top: none;
      border-bottom: none;
      border-radius: 20px / 70px;
    }

    span {
      width: 100px;
      height: 90px;
      margin: 7px;
      float: left;
      border: 4px solid #797979;
      font-size: 18px;
      color: #797979;
    }

    .squarebrackets {
      border: none;
      position: relative;
      width: 200px;
      height: 100px;
      padding: 0;
      margin: 1em;
    }

    .squarebrackets:before,
    .squarebrackets:after {
      content: '';
      display: block;
      height: 100%;
      width: 15px;
      border: 4px solid #797979;
      position: absolute;
      top: -5px;
    }

    .squarebrackets:before {
      left: 0;
      border-right: 0;
    }

    .squarebrackets:after {
      right: 0;
      border-left: 0;
    }

 

三、完整代碼

完整代碼示例下載