css secrets----multiple borders

css secrets----multiple borders

　　原始文档： 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 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/ethy/p/4877397.html