纯CSS3边框代码集合

mickeyort

半透明边框

1. 
   
2. border:10px solid hsla(0, 0%, 100%,.5);
   
3. background-clip:padding-box;
   

复制代码

缝边效果

1. 
   
2. outline: 1px white dashed;
   
3. outline-offset:-10px;
   
4. border-radius:4%;
   
5. background:#795548;
   

复制代码

边框内圆角 可用于图标展示

1. 
   
2. border-radius:10px;
   
3. background: tan;
   
4. outline:10px solid #655;
   
5. box-shadow:0 0 0 5px #655;
   

复制代码

信封边框

1. 
   
2. padding:1em;
   
3. border: 1em solid transparent;
   
4. background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
   

复制代码

注脚效果

1. 
   
2. padding-top:1em;
   
3. border-top: .2em solid transparent;
   
4. border-image: 100% 0 0 linear-gradient(90deg,currentColor 4em,transparent 0);
   

复制代码

动画蚂蚁线

1. 
   
2. @keyframes ants{100%{background-position:100%;}}
   
3. div{
   
4. width:200px;
   
5. height: 70px;
   
6. border: 1px solid transparent;
   
7. background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
   
8. animation:ants 12s linear infinite;
   
9. }  
   

复制代码