使用background-clip属性实现透明边框

 .bordertest {
border: 30px solid hsla(0,0%,90%,.5);
background: #bbb;
background-clip: padding-box;
width:500px;
height:300px;
}

查看运行效果

使用box-shadow模拟多重边框

 .bordertest1 {
background: lightblue;
box-shadow: 0 0 0 10px #000,
0 0 0 20px #888,
0 0 0 30px #aaa;
width:300px;
height:200px;
position: absolute;
top:100px;
left:100px;
padding: 10px;
}

使用outline属性生成多重边框

 .bordertest2{
background: lightblue;
border: 10px solid #000;
outline: 10px dashed #888;
width:300px;
height:200px;
position: absolute;
top:100px;
left:500px;
padding: 10px;
}

outline属性结合outline-offset属性的多重边框实现缝边效果

.bordertest3{
background: lightblue;
border: 15px solid lightblue;
border-radius: 5px;
outline: 3px dashed #fff;
outline-offset: -10px;
width:300px;
height:200px;
position: absolute;
top:100px;
left:900px;
padding: 10px;
}

查看运行效果

最新文章

  1. .NET组件程序设计之线程、并发管理(二)
  2. MongoDB学习笔记五:聚合
  3. Java基础之泛型——使用泛型链表类型(TryGenericLinkedList)
  4. 一步一步理解word2Vec
  5. Data URL
  6. BF算法和KMP算法(javascript版本)
  7. 【模板】【凸包】Graham_scan
  8. JQUERY1.9学习笔记 之内容过滤器(三) has选择器
  9. vs2010快捷方式
  10. 大表建立索引引发enq: TX - row lock contention等待
  11. BZOJ 1497: [NOI2006]最大获利( 最大流 )
  12. NYOJ--541--最强DE 战斗力(递推)
  13. Django中的From和ModelForm
  14. getElementById和$()获取值一点注意事项
  15. oa项目环境搭建的操作步骤详解
  16. collectd使用
  17. [RF]怎样用Robot Framework写好Test Case?
  18. service fabric重装电脑后集群失败
  19. OAuth2.0 Owin 授权问题
  20. Codeforces Round #298 (Div. 2) B. Covered Path 物理题/暴力枚举

热门文章

  1. 《Linux内核原理与分析》第六周作业
  2. python base64.b64decode 等号可以随便加
  3. xterm下字体设置
  4. FluentData -Micro ORM with a fluent API that makes it simple to query a database 【MYSQL】
  5. G2 绘制混合图例 demo
  6. pycharm同步代码
  7. TCP/IP学习20180701-数据链路层-IP子网寻址
  8. Cglib源码分析 invoke和invokeSuper的差别(转)
  9. iOS上传本地代码到git
  10. ef中文文档