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