CSS中非布局样式（二）背景，边框

最新推荐文章于 2020-07-11 16:09:00 发布

背太阳的牧羊人

最新推荐文章于 2020-07-11 16:09:00 发布

阅读量244

点赞数

分类专栏： CSS 文章标签：背景边框

本文链接：https://blog.csdn.net/u013565133/article/details/103327393

版权

CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

CSS布局是一块非常重要的内容，这里单独介绍非布局样式。非布局样式有下面几种分类（还有其它分类看系列文章）：

背景

跟盒子相关的样式。

渐变色背景和多背景叠加

旧的写法是：background: -webkit-linear-gradient(left, red, green);
新的写法（也是标准写法）是：background: linear-gradient(to right, red, green);

可以加上角度值，就是渐变的方向：background: linear-gradient(45deg, red, green);
加上角度值效果：
在这里插入图片描述
可以加上多种颜色：background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);其中 n% 是控制位置的。
多种颜色效果：

也可以指定不透明颜色或半透明颜色，这样就一部分有背景一部分没背景，如果有背景的部分设置足够窄就变成一条线了：background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
不透明颜色效果：
在这里插入图片描述
如果设置背景大小，有很多人会认为背景大小只能设置背景图片的大小，实际上对渐变也是适用的，设置大小后默认是平铺的。

 background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
 background-size: 30px 30px;

渐变设置大小效果：
在这里插入图片描述
如果在反方向再来一条斜线：

            background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
                linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
            background-size: 30px 30px;

多个渐变背景叠加效果：会变成一个网格，神奇吧 ~
在这里插入图片描述
多个背景的叠加可以使眼色，也可以是图片，都可以叠加。
除了线性渐变，还有放射渐变，多动手可以做出很多漂亮的背景。

背景图片和属性

背景图可以去设置多个属性，什么位置开始显示（background-position），显示多大（background-size），要不要重复（background-repeat），尺寸大小（background-size）。

雪碧图

雪碧图就是把多个图片素材集中在一张图片中，这样做可以减少http请求，比如100个图标如果不做成雪碧图那就要有100次http请求，但是把这100个图标集中在一张图上就只需要一次http请求，这对性能提升是很有帮助的。

background-position是相对容器而不是相对图片。

在用雪碧图需要注意图标的坐标（相对图片）跟图片需要偏移的距离是反的。比如：下面两个图标在页面上显示
在这里插入图片描述

<body>
    <div class="c2">

    </div>
    <div class="blank"></div>
    <div class="c3">

    </div>
</body>

    <style>
        .c2{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -17px -5px;
            background-size: 261px 113px;
        }
        .c3{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -169px -23px;
            background-size: 261px 113px;
        }
        .blank{
            height: 20px;
        }
    </style>

图标显示效果：
在这里插入图片描述
background-size的作用可以把背景缩小。

缩小背景可以在我们需要缩小背景图标的时候缩小（注意：如果背景图标在雪碧图中可能需要重新调整图标相对图片的位置，也就是需要重新调整图片相对容器的距离）。

在适配移动端的时候，移动端的分辨率现在都比较高。本来一个像素在电脑上显示就很清晰了，在移动端则可能对应移动设备屏幕多个像素，可能四个像素，也可能九个像素。一个像素在移动设备中覆盖多个像素时就会看起来模糊，此时我们需要用多个像素去做，简单的说就是把一张大的图片缩小，这样在移动端就会清晰很多。这就是高清屏，retina屏等等，如果碰到两倍图仍然不够清晰，比如在iPhone6以上，它们可能是三倍屏，如果是三倍屏就需要三倍尺寸的图然后大小是除以三后的值就好了。

base64

base64实际上是一种文本格式的图，使用很简单：background:url(很长一段文本);，这个文本实际上就是图片本身。在图片转base64位过程中图片的体积会增大三分之一（也就是体积会变成原来的三分之四）。使用base64位图的好处是可以不用进行http请求，缺点是文件的体积会增大，不仅会增大图片本身的体积，而且文本放在css文件中也会使css文件变大，另外也会增大浏览器解码的开销，所以base64位图一般只用在小的图标上。

边框

除了平时用border:1px solid red;这种简写方式外，还可以用下面的属性分别指定边框属性（在控制台中查看边框的属性可以有以下）：
在这里插入图片描述

边框背景图

border.png原图是：
在这里插入图片描述

  <div class="c2">
   </div>

边框的颜色设置成transparent透明：

.c2{
            width:400px;
            height: 200px;
            /* border-width: 30px; */
            border:30px solid transparent;
            border-image:url(./border.png) 30 round;
        }

效果是：
在这里插入图片描述
把边框的宽度变小并不会影响我们的效果：

但上面的效果并不是我们想要的，我们想要四个角的图片不变，边框中间部分平铺：

 border-image:url(./border.png) 30 repeat;

此时黄色的方块就不断地重复把边框填充了：
在这里插入图片描述
但发现边框有些方块并没有按照整个计算去填充（部分方块显示不完整），css也为我们提供了解决方法：

 border-image:url(./border.png) 30 repeat round;

这就是我们想要的效果：
在这里插入图片描述

边框衔接（三角形）

给一个盒子设置30px的底边，其它的边是没有的：

.c3{
            width:400px;
            height: 200px;
            border-bottom:30px solid red;
        }

效果：
在这里插入图片描述
接着增加其它的边：

.c3{
            width:400px;
            height: 200px;
            border-bottom:30px solid red;
            border-right:30px solid blue;
        }

效果变成：有一个斜切的形状，可以猜测四条边交界的地方是斜切的
在这里插入图片描述
尝试把右边变成transparent透明色：

.c3{
            width:400px;
            height: 200px;
            border-bottom:30px solid red;
            border-right:30px solid transparent;
        }

变成一个梯形：
在这里插入图片描述
把左边（left-border)也变成transparent透明：

.c3{
            width:400px;
            height: 200px;
            border-bottom:30px solid red;
            border-right:30px solid transparent;
            border-left:30px solid transparent;
        }

变成等腰梯形：
在这里插入图片描述
接着把等腰梯形的上边（盒子的宽度）去掉：

.c3{
            width:0;
            height: 200px;
            border-bottom:30px solid red;
            border-right:30px solid transparent;
            border-left:30px solid transparent;
        }

就变成了一个三角形：
在这里插入图片描述
给边框加个圆角border-radius: 50px;会变成一个扇形：

背太阳的牧羊人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中非布局样式（二）背景，边框

CSS布局是一块非常重要的内容，这里单独介绍非布局样式。非布局样式有下面几种分类（还有其它分类看系列文章）：背景跟盒子相关的样式。渐变色背景和多背景叠加旧的写法是：background: -webkit-linear-gradient(left, red, green);新的写法（也是标准写法）是：background: linear-gradient(to right, red, ...
复制链接

扫一扫