当前位置: 首页 > Web前端 > CSS

多重边框的两种实现

时间:2023-03-30 14:27:41 CSS

CSS显示的多重边框:border-shadowoutline多边框<主体><样式>.common{宽度:25vw;高度:20vh;保证金:10%;背景:灰色;}.box-shadow{box-shadow:00010px#655,00015pxdeeppink,0px2px5px15pxhsla(240,100%,50%,.5);}.inner-box-shadow{背景:白色;框阴影:插入0040pxhsla(0,100%,50%,1);}.outline{border:2pxsolidhsla(280,100%,50%,1);大纲:2px虚线hsla(0,0%,100%,1);轮廓偏移:-15px;边框-r半径:10px;轮廓宽度:2px;}

box-shadow是一个以逗号分隔的列表,用于描述一个或多个阴影效果。该属性可以使几乎所有元素的边框产生阴影。如果元素也有border-radius集,阴影也会有圆角。多个阴影的z顺序遵循与多个文本阴影相同的规则(第一个阴影在顶部)。/*x偏移|偏移|阴影颜色*/box-shadow:60px-16pxteal;/*x偏移|偏移|阴影模糊半径|阴影颜色*/box-shadow:10px5px5pxblack;/*xoffset|y偏移量|阴影模糊半径|阴影扩散半径|阴影颜色*/box-shadow:2px2px2px1pxrgba(0,0,0,0.2);/*insert(shadowinwardinward)|x偏移|偏移|阴影颜色*/box-shadow:inset5em1emgold;/*由逗号分隔的任意数量的阴影*/box-shadow:3px3pxred,-1em00.4emolive;/*globalkeyword*/box-shadow:inherit;box-shadow:initial;box-shadow:unset;指定单个框阴影的用法:给两个、三个或四个数字值大小写。如果只给出两个值,这两个值将被浏览器解释为x轴上的偏移量和y轴上的偏移量。如果给出第三个值,则第三个值将被解释为模糊半径的大小。如果给出第四个值,则此第四个值将被解释为扩展半径的大小。可选,内嵌(阴影向内)内嵌。可选,颜色值。声明多个阴影时,用逗号分隔阴影。outlineCSS的outline属性是一种简写属性,用于设置一个或多个单独的轮廓属性,例如outline-style、outline-width和outline-color。在大多数情况下,速记属性更可取且方便。轮廓在几个方面与边框不同:轮廓不占用空间,它们绘制在内容上;轮廓可以是非矩形的。在Gecko/Firefox中,轮廓是矩形的,但Opera会在元素结构周围绘制一个非矩形的形状;/*宽度|风格|颜色*/轮廓:1px纯白色;outline-offset:用于设置轮廓和一个元素的边缘或边框之间的间隙。outline是元素的轮廓,悬浮在元素的边框之上。元素和它的轮廓之间是透明的。即它们之间的颜色会继承父元素的背景色。/*values*/outline-offset:3px;outline-offset:0.2em;/*全局值*/outline-offset:inherit;outline-offset:initial;outline-offset:unset;