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方式
