css揭秘第二章：背景与边框，自己的学习笔记，如有错误请多指正

最新推荐文章于 2023-05-16 16:43:15 发布

睡不醒的大南

最新推荐文章于 2023-05-16 16:43:15 发布

阅读量218

点赞数

分类专栏： # css揭秘笔记 css 文章标签： css css3 svg

本文链接：https://blog.csdn.net/weixin_47029896/article/details/115447393

版权

笔记同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

css揭秘

4 篇文章 0 订阅

订阅专栏

1 半透明边框

	width: 200px;
    height: 200px;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background-clip: padding-box;

默认背景是延伸到边框的下层的，但是我们要body的背景从半透明白色边框透上去，可以通过改变background-clip属性的值来处理，这个属性初始值是border-box，是表示背景会被border的外边缘切掉，改成padding’-box会让背景被内边距的外缘裁切掉

2.多重边框

box-shadow方案

box-shadow接受逗号分隔法，可以创建任意数量的投影，但是box-shadow是层层叠加的

p {
    box-shadow: 0 0 0 10px #F4AAB9,
        0 0 0 15px #66CCFF,
        0 2px 5px 15px rgba(0, 0, 0, 0.6);
    margin: 4em;
    padding: 1em;
}

<div>
        <p>Hello World</p>
</div>

投影行为和边框并不完全一致，因为它不会影响布局，但是可以通过内边距或者外边距模拟出边框需要的空间
上述假边框出现在元素的外圈，并不会影响鼠标事件，比如悬停或者点击

outline 方案

比box-shadow要灵活，可以产生类似虚线的效果
border 和 outline

border 和 outline 很类似，但有如下区别：
- outline不占据空间，绘制于元素内容周围。
- 根据规范，outline通常是矩形，但也可以是非矩形的。
另一个好处在于，可以通过outline-offset属性控制它和元素边缘之间的间距，，这个属性可以是负值， outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。
```
 	width: 200px;
    height: 200px;
    background: yellowgreen;
    outline: 1px dashed deeppink;
    outline-offset: -15px;
```

在这里插入图片描述

它只适用于双层边框的场景

边框不会贴合border-radius产生的圆角

	width: 200px;
    height: 200px;
    background: yellowgreen;
    border-radius: 35px;
    outline: 1px dashed deeppink;

文档：https://www.w3.org/TR/css-backgrounds/ https://www.w3.org/TR/css-ui-3/

灵活的背景定位

难题：希望图片的容器和边角之间流出一定的空隙

background-position方案

用background-position的拓展语法

允许背景图片指定任意角的偏移量，只要在偏移量之前指定关键字，

	background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210401/37825646305951.png);
    background-repeat: no-repeat;
    background-position: top 100px left 100px;

background-origin 方案

background-position：top left是根据padding box的边缘来讲的，这样边框才不会遮住背景图片，，可以用background-origin来改变默认值，他的值改成content-box这样背景图片会以内容的边缘来作为基准，此时背景距离边角的偏移量就会和内边距保持一致了

padding:10px;	
background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210401/37825646305951.png);
background-repeat: no-repeat;
background-origin: content-box;

calc()方案

如果想让图片定位到距离底边10px且距离右边20px的位置，以左上角偏移来说，就是以下

background: url(xx) no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

值与单位：https://www.w3.org/TR/css-values/

边框内圆角

有一个边框只要内部有圆角

.one {
    background-color: #655;
    padding: 0.8em;
}
.one > div {
    background: tan;
    border-radius: 0.8em;
    padding: 1em;
}
/*用两个元素实现*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="one">
        <div>this is some words</div>
    </div>
</body>

</html>

只用一个元素的方法

/*巧妙利用了outline不会跟着圆角走，用shadow填补缝隙*/
div {
    background: tan;
    border-radius: 0.8em;
    padding: 1em;
    box-shadow: 0 0 0 0.6em #655;
    outline: 0.6em solid #655;
}

但是box-shadow的扩张值不一定等于描边的宽度，我们只要能填补缝隙就好，如果据哦张志等于描边宽度会导致UA渲染异常，但是多大的扩张值可以填补空隙？？

大概圆角的一半就可以

box-shadow: 0 0 0 0.4em #655;

条纹背景

水平条纹

background: linear-gradient(#fb3 50%, #58a 50%);/*两条相等的条纹*/

如果多个色标（应该就是百分比表示的值）有相同位置，他们会产生一个无限小的过度区域，过渡的起止颜色分别是第一个和最后一个指定值，从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。

因为渐变是一种由代码生成的图像，我们能像对待任何背景图的那样对待它，可以通过background-size来调整尺寸

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

background: linear-gradient(#fb3 50%, #58a 50%);/*修改条纹的大小-一个大一个小*/

如果某个色标的位置值比整个列表中在它之前的色标的位置都要小，则该色标的位置值会被设置为它前面所有色标位置的最大值

background: linear-gradient(#fb3 20%, #58a 0);/*把第二个色标设置为0，这样修改的时候只要修改前一个值就好了*/

多个颜色的条纹

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);

垂直条纹

和水平差不多一样，只需要在开头加个参数表示渐变的方向，还要把background-size改变

background: linear-gradient(to right,/*或者90deg*/ #fb3 50%, #58a 50%);
background-size: 30px 100%;

斜向条纹

改变斜的方向

background: linear-gradient(45deg, #fb3 50%, #58a 50%);
background-size: 30px 30px;

在这里插入图片描述

可见，这是行不通的。

我们需要这样

background: linear-gradient(45deg, #fb3 25%, #58a 0,
#58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

也可以用linear-gradient的加强版repeating-linear-gradient

    background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0. #58a 30px);

同色系条纹

把深色的颜色指定为背景色，把半透明的白色条纹叠加到背景色上来。

复杂的背景图案

网格

div {
    width: 200px;
    height: 200px;
    background: white;
    background-image: linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
    linear-gradient( rgba(200, 0, 0, 0.5) 50%, transparent 0);
    background-size: 30px 30px;
}

网格大小可以调整，网格线条粗细保持固定，下面是使用长度而不是百分比作为色标的场景

div {
    width: 200px;
    height: 200px;
    background:#58a;
    background-image: linear-gradient(white 1px, transparent 0),
    linear-gradient( 90deg, white 1px, transparent 0);
    background-size: 30px 30px;
}

两幅图叠加

div {
    width: 200px;
    height: 200px;
    background:#58a;
    background-image: 
    linear-gradient(white 3px, transparent 0),
    linear-gradient(90deg, white 3px, transparent 0),
    linear-gradient(white 1px, transparent 0),
    linear-gradient( 90deg, white 1px, transparent 0);
    background-size: 75px 75px, 75px 75px,
                     15px 15px,15px 15px;
}

在这里插入图片描述

波点

径向渐变可以创建圆形，椭圆或者是他们的一部分

div {
    width: 200px;
    height: 200px;
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
}

在这里插入图片描述

生成两层圆点图案，把他们的背景定位错开

div {
    width: 200px;
    height: 200px;
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
                      radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;/*第二层背景的位移是贴片宽高的一半*/
}

在这里插入图片描述

棋盘

div {
    width: 200px;
    height: 200px;
    background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);/*角向渐变*/
    background-size: 30px 30px;
}

在这里插入图片描述

伪随机背景

为了让最小公倍数最大化，这些数字最好是相对质数，最最好选质数，

连续的图像边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        padding: 1em;
        border: 1em solid transparent;
        background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/ 5em 5em;
    }
</style>

<body>
    <div></div>
</body>

</html>
/*老式信封样式的边框*/

@keyframes ants {
        to {
            background-position: 100%;
        }
    }

    div {
        padding: 1em;
        border: 1px solid transparent;
        background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/ .5em .5em;
        animation: ants 12s linear infinite;
    }
/*虚线动画效果*/

“蚂蚁行军线”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        border-top: .2em solid transparent;
        border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
    }
</style>

<body>
    <div><strong>脚注效果123123</strong></div>
</body>

</html>