当前位置: 首页 > 工具软件 > CSS-Secrets > 使用案例 >

css secrets----multiple borders

拓拔泉
2023-12-01

  原始文档: 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

 类似资料:

相关阅读

相关文章

相关问答