边框属性 | 乐趣区

多重边框的两种实现方案： border-shadowoutline<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mutiple border</title></head><body> <style> .common { width: 25vw; height: 20vh; margin: 10%; background: gray; } .box-shadow { box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0px 2px 5px 15px hsla(240, 100%, 50%, .5); } .inner-box-shadow { background: white; box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1); } .outline { border: 2px solid hsla(280, 100%, 50%, 1); outline: 2px dashed hsla(0, 0%, 100%, 1); outline-offset: -15px; border-radius: 10px; outline-width: 2px; } </style> <div class="common box-shadow"></div> <div class="common inner-box-shadow"></div> <div class="common outline"></div></body></html>box-shadow以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。 ...

1、css实现边框动画效果如图：<style> body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before, .border-box::after{ position: absolute; content: ’ ‘; width: 0; height: 0; border: 1px solid transparent; box-sizing: border-box; } .border-box::before{ top: 0; left: 0; /* 鼠标离开后的回退效果，如果不设置回退效果，则鼠标离开后就直接很生硬的隐藏了 */ transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s; } .border-box::after{ bottom: 0; right: 0; transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in; } .border-box:hover:before, .border-box:hover:after{ width: 100%; height: 100%; } .border-box:hover::after{ border-bottom-color: #fff; border-left-color: #fff; transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s; } .border-box:hover::before{ border-top-color: #fff; border-right-color: #fff; transition: width 0.2s ease-out,height 0.2s ease-out 0.2s; }</style><body> <div class=“box”> <div class=“border-box”>hover查看效果</div> </div></body> ...