css背景和边框：多重、半透明、定位、圆角、连续图案

terry 2年前 (2023-09-27) 阅读数 132 #数据结构与算法

半透明边框

background-clip
background-clip：border-box|padding-box|content-box；默认设置是边框。该属性指定背景的绘制区域。通俗地说，这就是指背景可以增加的范围。这三个属性值从字面上理解并不难，它们可以扩展到border、padding和content。
RGBA/HSLA
分别为RGB/HSL，加上透明度A，值为0~1。

将背景绘图区域设置为填充框，边框设置为透明色即可达到效果。实现方案：

.translucent-borders{
    width: 300px;
    height: 300px;
    padding:10px;
    border:10px solid hsla(0,0%,100%,.5);
    background-color: #fff;
    background-clip:padding-box;
}
复制代码

多重边缘

上图中的多重边缘可以使用box-shadow来实现。缺点是只能设置连续线。

需要注意的是，使用box-shadow创建“假”边框不会影响布局，也不会受到box-sizing属性的影响。因此，在实际使用中，一定要注意为这些“假”边留出空间。您可以使用边距或插入填充（绘制）来解决此问题。

box-shadow 支持逗号分隔语法，我们可以创建任意数量的阴影。

实现方案：

.multiple-borders{
    width: 200px;
    height: 200px;
    padding:10px;
    box-sizing: border-box;
    /*border:10px solid red;*/
    border-radius: 10px;
    margin:50px;
    background: pink;
    box-shadow:
    0 0 0 10px red,
    0 0 0 10px blue, 
    0 0 0 20px green ,
    0 0 0 30px purple,
    0 2px 15px 40px rgba(0,0,0,.6);
}
复制代码

如上图所示，如果我们只需要两个边缘层，我们当然也可以使用outline来实现，因为outline不能接受用逗号分隔的多个值。因此，只能到达两个边界层。

我们可以使用轮廓偏移属性来确定元素与元素边缘之间的距离。该属性甚至可以接受负值来实现上图中的接缝效果。

实施计划：

.outline-borders{
    width: 200px;
    height: 200px;
    padding:25px;
    background: yellowgreen;  
    outline: 2px dashed #fff;
    outline-offset: -15px;
}
复制代码

注意：草图中有一个错误。边缘不一定适合边缘半径生成的圆角，如下所示。所以如果有圆角，应该使用盒阴影来填充间隙。

灵活的背景定位

通常我们希望将背景图像移动到容器的某个角落。在 CSS 2.1 中，我们只能指定距左上角的偏移量，或者简单地与其他三个角完全对齐。然而，有时我们希望图像与容器的四角之间留有一定的空间（类似于填充效果），如上图所示（距右侧20px，距底部20px），那么我们可以使用CSS3 中提供了以下功能选项。

background-position的扩展语法方案
在CSS背景和边框（第三版）（w3.org/TR/css3-bac…）中，background-position属性已被扩展以允许我们指定背景图像从任意角度的偏移只要我们在偏移前指定关键字即可。

实现方案：

.background-position{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg)  no-repeat blue;
    background-position: right 20px bottom 20px;
}
复制代码

背景原点方案

设置某个角点到背景图片的偏移量时，如果是上图的情况：该偏移量对应的是容器的内边距。如果我们使用上面提到的背景位置扩展语法方案，并且代码不够DRY，我们可以使用background origin来改变背景的相对定位，让它自动跟随我们设置的padding，而无需单独声明偏移量。数量值。

注意：如果背景图片的背景附件属性为“固定”，则该属性无效。

实现方案：

.background-origin{
    margin: 20px;
    width: 200px;
    height: 200px;
    padding: 10px;
    border:10px solid red;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg) right bottom no-repeat blue; 
    background-origin: content-box;
}
复制代码

calc()方案
不要忘记在calc()函数中的-和+运算符两边加一个空格，否则会出现解析错误！

这个解决办法是使用calc()直接从左上角计算位置，并将其设置为背景位置。

执行计划：

.calc{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#fff;
    background: url(http://csssecrets.io/images/code-pirate.svg) calc(100% - 10px) calc(100% - 10px) no-repeat blue;
}
复制代码

内圆角

使用上面提到的不适合圆角和盒阴影的轮廓即可实现上图。盒子阴影的扩展半径是圆角半径的一半。

实现方案：

.inner-rounding{
    width: 200px;
    height: 200px;
    padding:10px;
    background: hotpink;
    border-radius: 10px;
    outline:10px solid purple;
    box-shadow: 0 0 0 5px purple;
    margin: 30px;
}
复制代码

条纹背景

实现条纹背景的主要方法是线性渐变（）渐变属性。

根据 CSS3 规范，如果某个色块的位置值小于整个列表中它前面的色块的位置，则将该色块的位置值设置为位置值中的最大值之前的所有色块。只需更改之前的值即可。

提供实现方案：


  /*水平条纹 */
    .horizontal-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(red 50%, green 0);
        background-size: 100% 30px;
    }
    
    /* 垂直条纹 */
    .vertical-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(90deg, red 50%, green 0);
        background-size: 30px 100%; 
    }
    
    /* 只能45度 */
    .diagonal-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, red 25%, green 0,green 50%, red 0,red 75%,green 0);
        /* 记得乘以根号2 */
        background-size: 42px 42px;  
    }

    /* 任意度数 */
    .better-diagonal-stripes{
        width: 200px;
        height: 200px;
        background: repeating-linear-gradient(60deg,red, red 15px, green 0, green 30px );
        background: repeating-linear-gradient(30deg,pink 0 15px, blue 0 30px, green 0 45px);  /* 简写 */
    }
    
    /* 同色系条纹 */
    .subtle-stripes{
        width: 200px;
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(45deg,  hsla(0,0%,100%,.3) 0 15px, transparent 0 30px);
    }
复制代码

复杂背景图案

" data-src="https://user-gold-cdn.xitu.io/2018/12/23/167db8e4ac2742e8?imageView2/0/ w /1280 /h/960/format/webp/ignore-error/1" height="20" data-width="456" data-height="448" />

实施计划：

.Polka{
    width: 200px;
    height: 200px;
    background: #655;
    background-image: 
    radial-gradient(pink 20%, transparent 0),
    radial-gradient(pink 20%,transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
复制代码

"数据 - src =“https://user-gold-cdn.xitu.io/2018/12/23/167db8ee36cbe06e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1”高度=“ 20" data -width="432" data-height="432" />

实施计划：

.blueprint{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    background-image: 
    linear-gradient(#fff 2px, transparent 0),
    linear-gradient(90deg,#fff 2px, transparent 0),
    linear-gradient(#fff 1px, transparent 0),
    linear-gradient(90deg,#fff 1px, transparent 0);
    background-size:60px 60px,60px 60px,20px 20px,20px 20px;
}
复制代码

连续图像边框

实施计划：

.continuous-image-borders{
    width: 400px;
    height: 200px;
    border:20px solid transparent;
    padding:10px;
    background: linear-gradient(#fff,#fff) padding-box, url(https://codeqd.com/zb_users/upload/2023/09/stone-art.jpg) border-box;
    background-size: cover;
}
复制代码

实施计划：

.vintage-envelope{
    width: 300px;
    height: 200px;
    padding:10px;
    border:10px solid transparent;
    background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0 15px, transparent 0 30px,blue 0 45px, transparent 0 60px) border-box;
}

作者：victor318x 链接：https://juejin.im/post/5c1f9a7e5188252ea66b4044
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。