返回列表 回复 发帖

[技巧心得] css产生额外的边框

利用outline属性
  1. .box {
  2.    border: 5px solid #292929;
  3.    outline: 5px solid #e3e3e3;
  4. }
复制代码
伪元素
  1. .box {
  2.   width: 200px; height: 200px;
  3.   background: #e3e3e3;
  4.   position: relative;

  5.   border: 10px solid green;
  6. }

  7. /* 创建和容器宽度相同的两个容器 */
  8. .box:after, .box:before {
  9.   content: '';
  10.   position: absolute;
  11.   top: 0; left: 0; bottom: 0; right: 0;
  12. }

  13. .box:after {
  14.   border: 5px solid red;
  15.   outline: 5px solid yellow;
  16. }

  17. .box:before {
  18.   border: 10px solid blue;
  19. }
复制代码
对象阴影
创建无限数量的边界更酷的方法是利用CSS3的box-shadow属性。
  1. .box {
  2.     border: 5px solid red;
  3.      box-shadow:
  4.        0 0 0 5px green,
  5.        0 0 0 10px yellow,
  6.        0 0 0 15px orange;
  7. }
复制代码
返回列表