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

CSS边框和背景

时间:2023-03-31 13:12:22 CSS

1.半透明边框默认情况下,背景会延伸到边框区域的下层。可以使用background-clip属性进行调整。该属性的初始值为border-box,表示背景会被元素的border-box(边框的外框)裁剪。如果设置为padding-box,背景将不会穿过border所在的范围,浏览器会使用padding的外边缘将背景剪掉。border:10pxsolidpink;background:red;background-clip:padding-box;效果如下:2、多边框的实现方式如下:(1)box-shadow方法支持逗号分隔语法,所以你可以创建任何数字投影。box-shadow将跟随元素的形状。当元素设置了border-radius时,就会沿着这个圆角显示。div{宽度:40px;高度:40px;背景:黄绿色;box-shadow:00010px#655,/*如果要在外圈添加5px的外框,需要指定扩展半径为15px(10px+5px)*/00015pxdeeppink,02px5px15pxrgba(0,0,0,.6);}效果如下:(2)outline实现方案outline的实现只适合实现两层边框,通过一层border和一层轮廓背景层:黄绿色;边框:10px实心#655;outline:5pxsoliddeeppink;使用outlineborder样式非常灵活。与box-shadow方案只能模拟实线边框不同,如果我们需要制作虚线边框效果,box-shadow是没有办法的。轮廓(描边)不会跟随div的圆角,但仍会显示直角样式。3灵活的背景定位(1)background-position它允许我们指定背景图片相对于任意角的偏移量,只要我们在offset前面指定shift关键字即可。/*背景图像与右边缘保持20px偏移,与底部边缘保持10px偏移*/background-position:right20pxbottom10px;(2)background-origin默认情况下,background-position以padding-box为准,使边框不覆盖背景图片。因此,top和left默认指的是padding-box的左上角background-origin,这个行为是可以改变的。默认情况下,它的值为padding-box。如果将其值改为content-box,background-position属性中使用的corner关键字将基于内容区域的边缘。每个元素上有三个矩形框,borderbox(边框的外边框),paddingbox(内边距的外边框)和contentbox(内容区域的外边框)。background-origin的取值分别是以上三种。4.边框的圆角使用box-shadow和outline实现。div{背景:棕褐色;边界半径:.8em;填充:1em;盒子阴影:000.6em#655;outline:.6emsolid#655;}主要原因是:描边不会跟随元素的圆角(因此显示直角),但box-shadow会。5.条纹背景(1)横条纹的实现/**0会被解析为30%。根据css规定,如果某个色标的位置值小于整个列表中它之前的色标的位置值,那么该色标的位置值将被设置为该位置的最大值前面所有色阶的值*相当于背景:linear-gradient(#fb330%,#58a30%);*/background:linear-gradient(#fb330%,#58a0);background-size:100%30px;(2)竖条纹背景:linear-gradient(toright,#fb350%,#58a0);background-size:30px100%;(3)Diagonalstripesdiv{background:repeating-linear-gradient(45deg,#fb3,#fb315px,#58a0,#58a30px);}(4)灵活的色调通过将最暗的颜色指定为背景色来调条纹,并在背景色之上叠加半透明的白色条纹以获得浅色条纹。优点是只需要修改一个地方就可以改变所有的颜色。div{背景图像:重复线性渐变(30deg,hsla(0、0%、100%、.1)、hsla(0、0%、100%、.1)15px,透明0,透明30px);}6.各种网格背景的实现通过组合多个渐变图案可以创建各种网格图案,使它们出现在彼此的透明区域。如果可以调整网格中每个单元格的大小,而网格线的粗细保持不变,则应使用长度而不是百分比。例如,绘图指南之类的网格就是这种情况。div{宽度:200px;高度:200px;背景:白色;背景图像:线性渐变(90度,rgba(200,0,0,.5)50%,透明0),线性渐变(rgba(200,0,0,.5)50%,透明0);背景大小:30px30px;}div{宽度:200px;高度:200px;背景:#58a;背景图像:线性渐变(白色1px,透明0),线性渐变(90deg,白色1px,透明0);背景大小:30px30px;}div{背景:#58a;背景图像:线性渐变(白色2px,透明0),线性渐变(90deg,白色2px,透明0),线性渐变(hsla(0,0%,100%,.3)1px,透明0),线性渐变(90deg,hsla(0,0%,100%,.3)1px,透明0);background-size:75px75px,75px75px,15px15px,15px15px;}7.波点效果的现实div{width:200px;高度:200px;背景:#655;背景图像:径向渐变(棕褐色30%,透明0),径向渐变(棕褐色30%,透明0);背景nd-尺寸:30px30px;background-position:00,15px15px;}8.棋盘格图案的渐变(1)思路是用两个直角三角形组成一个正方形,然后在水平和垂直方向上进行第二层渐变移动一半的tile长度,可以组合成一个完整的正方形div{width:200px;高度:200px;背景:#eee;背景图像:线性渐变(45deg,rgba(0,0,0,.25)25%,透明0,透明75%,rgba(0,0,0,.25)0),线性渐变(45deg,rgba(0,0,0,.25)25%,透明0,透明75%,rgba(0,0,0,.25)0);背景位置:00,15px15px;background-size:30px30px;}(2)svg方式svg{background:#eeeurl('data:image/svg+xml,\\\\');background-size:30px30px;}9.伪随机背景使用“蝉原理”,即通过质数增加随机性的真实性。例如,您可以使用此方法设计不规则的线性渐变。.random{宽度:200px;高度:200px;背景:hsl(20、40%、90%);背景图像:线性渐变(90deg,#fb311px,透明0),线性渐变(90deg,#ab423px,透明0),线性渐变(90deg,#65541px,透明0);background-size:41px100%,61px100%,83px100%;}这个蝉原理也适用于:(1)在图片库中,应用微妙伪时可以使用多个:nth-child(a)选择器-对每幅图像进行随机旋转效果,令a为质数。(2)如果我们要生成一个动画,并且我们不希望它按照明显的规则出现循环,我们可以应用多个持续时间为质数的动画。8.连续图框的思路是在图片之上加一层纯白色纯色背景。为了让下层图片的背景透过边框区域出现,需要为两层背景指定不同的background-clip值。最后一点就是设置多个背景底部的背景颜色,需要一个由白到白的CSS渐变来模拟纯白色纯色背景的效果。.border-img{宽度:200px;高度:200px;填充:1em;border:1em实心透明;背景:线性渐变(白色,白色),url(dog.jpg);背景尺寸:封面;背景剪辑:填充框,边框框;background-origin:border-box;}这个技巧也适用于渐变图案。例如:信封的样式。div{宽度:200px;高度:100px;填充:16px;边框:16px实心透明;背景:线性渐变(白色,白色)填充框,重复线性渐变(-45deg,红色0,红色12.5%,透明0,透明25%,#58a0,#58a37.5%,透明0,透明50%)0/5em5em;}还可以实现虚线滚动动画@keyframesants{to{background-position:100%;}}.dotted{margin-top:20px;底部边距:20px;填充:1em;边框:1px实心透明;背景:线性渐变(白色,白色)填充框,重复线性渐变(-45deg,黑色0,黑色25%,白色0,白色50%)0/.6em.6em;动画:蚂蚁12s线性无限;}