css揭秘实战技巧- 背景与边框 [一]

时间  2019-11-09
标签 css 揭秘 实战 技巧 背景 边框 栏目 CSS 繁體版
原文   原文链接

前言

这段时间，一直以为css这块感受每次写代码都是经常使用的那些基本属性，以为始终没有对css有一个更深层次的掌握，因此，最近开始学习css相关进阶知识，首先第一关就是攻克 “css揭秘” 这本经典书籍，因此在阅读过程当中，有一些总结想分享给你们，但愿你们一块儿进步。css

全目录

本系列文章，主要是围绕css3属性，实现咱们常见的各类效果，这些效果都是咱们实战开发中常常能够用到的效果：css3

  1. css揭秘实战技巧- 背景与边框 [一]
  2. css揭秘实战技巧- 形状 [二]
  3. css揭秘实战技巧 - 视觉效果[三]
  4. css揭秘实战技巧 - 字体排印[四]
  5. css揭秘实战技巧 - 用户体验[五]
  6. css揭秘实战技巧 - 结构与布局[六]
  7. css揭秘实战技巧 - 过渡与动画[七]

本节要说的内容：浏览器

  1. 半透明边框
  2. 多重边框
  3. 灵活的背景定位
  4. 边框内圆角
  5. 条纹背景
  6. 复杂的背景图案
  7. 总结

一：半透明边框

默认状况下，css背景会覆盖到边框区域，以下： bash

代码以下： 

width: 200px;
height: 200px;
background-color: green;
padding: 10px;
border: 10px solid rgba(0, 0, 0, .2); 
复制代码

若是想要背景只覆盖到padding区域或者content区域，如何处理？backgroud-clip;ide

backgroud-clip: border-box(默认) / padding-box / content-box;
复制代码

二：多重边框

首先，咱们看一下如下效果：布局

如何实现如下效果呢？

  1. 咱们最早想到的就是使用边框
width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
复制代码
  1. 若是咱们想实现两层边框呢？采用border + outline描边。

width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
outline: 10px solid pink;
复制代码
  1. 若是咱们想实现多层边框呢？outline + border只能实现两层边框，两层以上的边框只能经过box-shadow实现。

width: 200px;
height: 200px;
background: green;
box-shadow: 0 0 0 10px blue, 0 0 0 20px deeppink, 0 0 0 30px pink;
//说明：box-shadow缩写：
//第一个参数表示水平方向向右的偏移量，第二个参数表示垂直方向向下的偏移量
//第三个参数表示阴影的模糊程度，第四个参数表示阴影半径大小。
//第五个参数：outsert/ inset 外阴影或者内阴影，默认为前者。
复制代码
总结：通常实现多重边框的效果时，能够考虑outline和box-shadow去实现相似的效果，可是各个方式有不一样的优缺点： 1. outline: 优势是可使用和border同样的属性值，能够设置为dashed等效果，这些是box-shadow没法实现的，缺点就是只能实现两层边框，同时边框不必定会贴合border-radius的值，即边框若是设置了圆角，描边可能仍是直角的。 2. box-shadow：优势是能够实现多层边框，可是使用box-shadow实现只是相似边框的效果，并非真正的边框，也不会占据布局空间,也不会影响鼠标事件（即鼠标放在阴影和组件上都会触发相同的事件）

三：灵活的背景定位

实现以下效果：想要背景图片距离底部20px，距离右边20px post

咱们最早想到的就是采用background-position实现，代码以下： 

width: 200px;
height: 200px;
background: url("./img/logo_blue.jpg") no-repeat green;
background-position: right 20px bottom 20px; 
//或者采用calc处理
//background-posotion: calc(100% - 20px) calc(100% - 20px)
background-size: 50px 50px;
复制代码

以上代码，咱们查看浏览器element发现： 学习

此时， backgroud-position所对应的偏移量是相对于padding-box所在的区域，那么，若是要相对于border-box或者content-box呢？咱们能够采用posotion-origin实现 

background-origin: padding-box(默认)/border-box/content-box
复制代码

四：边框内圆角

首先，咱们看一下以下效果：边框外部直角，边框内部圆角 字体

咱们最多见的实现方法就是，采用两个div，一个设置直角，一个设置圆角，而后叠加在一块儿便可，这种方法绝对没问题，可是他使用了两个标签，那么使用一个标签能够实现吗？固然能够，动画

width: 400px;
height: 200px;
background: green;
outline: .5em solid red;
border-radius: .8em;
box-shadow: 0 0 0 .5em red;
复制代码

实现说明：咱们采用outline去进行外部描边，且为直角，内部采用border-radius设置圆角，且采用box-shadow去填充由于圆角而空出来的部分，从而实现边框内圆角的效果。（如下是没有设置box-shadow的效果）

五：条纹背景

1.首先看一下第一个效果：

看到效果，咱们就知道，这不就是渐变嘛，采用linear-gradient便可，代码以下： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green, red);
//等价于：linear-gradient(green 0, red 100%)//0表示从开始渐变的起始位置，100%表示渐变的结束位置。
复制代码

2.咱们在看看第二个效果

实现代码以下： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 20%, red 80%);//表示从上到下，20%处开始渐变，80%处中止渐变
复制代码

3.如何采用linear-gradient实现条纹效果呢？即去除渐变的效果,效果以下：

关键点：就是从渐变的起始位置和结束位置下手，若是在开始渐变前，就结束了渐变，不就没有渐变效果了嘛，因此只须要设置结束渐变的位置小于开始渐变的位置便可,代码以下： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 50%, red 50%); // 此处，第二参数只要小于等于50%均可以。
复制代码

4.如何实现垂直条纹呢？

代码以下： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(90deg, green 50%, red 50%);// 即旋转90度 
//或者
background: linear-gradient(to right, green 50%, red 50%);//默认是to bottom，即等价于0deg。to right等价于90deg
复制代码

5.如何设置渐变背景的大小？即background-size也能够像控制图片的背景大小同样，控制渐变的背景大小。 以下效果：

代码以下： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(to right, green 50%, red 50%) no-repeat;//设置背景是否重复。
background-size: 30px 100%;//设置背景大小
复制代码

6.如何倾斜条纹呢？ 实现效果以下：

此刻，咱们可能想到的是，旋转一下不就能够了吗？

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(45deg, green 50%, red 50%);
background-size: 30px 30px;
复制代码

效果以下：

这个时候，咱们发现，咱们在linear-gradient(45deg, green 50%, red 50%)设置的旋转，实际上是旋转每个背景块，并非让整个div旋转，那么，这个时候，咱们经过transform:rotate(45deg)来旋转div看一下效果：

可是看到效果，哈哈哈，明显不是咱们想要的效果, 怎么办呢？固然是有其余属性支持喽，即repeating-linear-gradient， 顾名思义，就是能够不断重复。 实现代码以下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, red 30px);
复制代码

实现的效果以下：

emmm,怎么出现渐变了呢？ 固然会出现了，你看看上面的实现代码，结束位置大于其实位置，那么，如何去除渐变呢？ 这里有一个小技巧，例如linear-gradient(green 0, green 30),这个时候虽然，结束位置大于起始位置，可是设置的同一种颜色，因此看不到渐变，看到的实际上仍是纯色。 因此，咱们能够利用这个小技巧去实现代码： 

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, green 30px, red 30px, red 60px, green 30px);
复制代码

啦啦啦，咱们最开始想要的效果就能够获得啦。

至此：条纹效果，不论是水平，垂直，仍是倾斜，咱们就能够均可以实现的，大体思路就是采用linear-gradient属性，而后经过设置起始位置和结束位置去掉渐变的效果，同时设置旋转的角度，配合repeating-linear-gradient便可实现咱们想要的各类条纹效果。

六：复杂的背景图案

出了上面咱们第五节所讲到的条纹背景，还有网格，波点，棋盘等更复杂的背景，下面咱们就看看这些效果如何实现吧！

  1. 网格背景：水平条纹和垂直条纹背景叠加在一块儿既能够实现网格效果。 代码以下：
width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 50%, transparent 0), linear-gradient(90deg, red 50%, transparent 0);
background-size: 40px 40px 40px 40px;
复制代码

上面代码实现的效果以下：

这是，若是咱们把渐变的起始位置调整为1px，就能够获得咱们想要的网格效果，那么最终效果以下：
同时，咱们能够把不一样的网格叠加在一块儿，代码以下： 

width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 1px, transparent 0), linear-gradient(90deg, red 1px, transparent 0), linear-gradient(green 5px, transparent 0), linear-gradient(90deg, red 5px, transparent 0);
background-size: 20px 20px, 20px 20px, 80px 80px, 80px 80px;
复制代码

实现效果以下：

  1. 波点背景 以前咱们实现的条纹，网格背景都是采用linear-gradient线性渐变，接下来，咱们来看看radial-gradient 径向渐变, 它主要用来建立各类圆形，椭圆，首先咱们看一下最简单的图案：圆形阵列，效果以下：
    代码以下：
width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
复制代码

首先说明一下：radial-gradient第一个参数设置渐变起始位置以及颜色，第二个参数设置渐变结束位置以及颜色（和linear-gradient相似，若是结束位置大于起始位置，则去掉渐变效果）

坦白说，上面的波点图并非真正的波点图，咱们来看看真正波点图的效果：

其实就是，又错位增长了一层圆形的显示，那咱们只须要将两种上面实现的效果，而且不一样的backgroud-position，而后叠加在一块儿便可， 代码以下：

width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
复制代码

注意：上面的代码，咱们要知道背景定位的位置必须是贴片的宽高的一半，这就意味着，若是咱们要修改贴片的宽高，就要同时修改多个位置，那么听从咱们的dry原则，采用mixin解决(此处的代码是scss)

@mixin polka($size, $dot, $base, $accent) { 
    background: $base;
    background-image:
    radial-gradient($accent $dot, transparent 0),
    radial-gradient($accent $dot, transparent 0); background-size: $size $size; background-position: 0 0, $size/2 $size/2;
}
//而后，咱们能够在建立波点的地方调用：
@include polka(30px, 30%, #655, tan);

复制代码

七：连续的图案边框

首先，咱们看一下以下效果：

此时，你们看了效果，是否是以为很简单？用 backgroud设置背景颜色为green,用border-color设置边框颜色为red不就能够啦， 代码以下： 

width: 300px;
height: 200px;
backgroud-color: green;
border: 20px solid red;
复制代码

上面的方案是采用backgroud + border的方式，固然能够(该方案其实就是第一节案例，半透明边框的实现原理)

那咱们是否能够采用两层backgroud的方式去实现呢？

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), red;
backgroud-clip: padding-box, border-box;
复制代码

基于以上代码，咱们能够将边框颜色改成边框图片，这样也就实现了咱们所说的图案边框的效果

代码以下：

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), url('./icon.png');
backgroud-clip: padding-box, border-box;
复制代码

实现的效果以下：

七：总结

以前，在用到content-box,padding-box，border-box等属性值的时候，可能更多的是用于box-sizing属性，用于改变盒模型，经过这一节的学习，咱们也知道了，这三个属性值一样适用于backgroud-clip,backgroud-origin等属性，

  1. background-clip: 用于控制背景铺满的区域，默认是border-box, 也能够为padding-box和border-box
  2. backgroud-position: 设置背景的偏移量，默认是相对于padding-box的偏移量，这是因为backgroud-origin的默认值是padding-box
  3. backgrund-origin: 控制backgroud-position的偏移量是相对于哪一个区域的偏移量。
  4. box-shadow：设置阴影效果，记住各个参数的含义。
  5. linear-gradient/repeating-linear-gradient：线性渐变，能够实现条纹，网格等效果。
  6. radial-gradient/repeating-radial-gradient: 径向渐变，能够实现波点。

以上是咱们这节内容所涉及到的属性，同时咱们要结合所将的案例，才能够有一个深刻的了解，一块儿加油！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程