freeethy

必须要全力以赴,才能看起来毫不费力。

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

  原始文档: https://www.zybuluo.com/freeethy/note/193574

  

box-shadow solution

  • 只能实现solid border

box-shadow表现为border,但是不属于box-sizing范围:

   background: yellowgreen;
   box-shadow: 0 0 0 10px #655;

 

多个box-shadow值可显示多个border的效果,多个box-shadow的值按层显示的,最前面的显示在最上层:

    box-shadow: 0 0 0 10px #655, 
0 0 0 15px deeppink;

多个box-shadow值,有些表现为border效果,有些表现为shadow效果,并且border-radius的影响,此时的border-radius对每个box-shadow值都有效果:

    box-shadow:0 0 0 10px #655,
    0 0 0 15px deeppink,
    0 2px 5px 15px rgba(0,0,0,.6);
    border-radius:10px;

 

outline solution

  • 可实现dashed border
  • 可配合outline-offset实现border的偏移
  • 只能实现两层border

此种方法的实现及border-radius的影响,border-radius对outline没效果:

    border: 5px solid #655;
    outline: 5px dashed deeppink;
    outline-offset: 10px;
    border-radius:10px;

 

posted on 2015-10-14 14:37  freeethy  阅读(261)  评论(0编辑  收藏  举报