css揭秘-学习小结

0 引言-编码技巧

尽量用相对单位，比如字体巨细和行高，如果是绝对值每次两个都要改，如果是相对值则只要改一个。
0.1 代码易维护和代码量不可兼得

为一个元素添加宽10px的边框，左侧不带边框，有两种方案
border-width: 10px 10px 10px 0;
border-width: 10px;
border-left-width: 0;
一个代码少但改的多，一个代码多但改的少
0.2 继续

可以使用inherit关键字，使元素继续父元素的属性：
input, select, button {font:inherit}
0.3 相对单位的使用

比如百分比，em，或视口相关单位：vw, vh, vmin, vmax
0.4 合理使用简写

不少属性可以简写到一个属性里，此处保举合理使用简写。因为如果属性睁开写，可能会遗漏，也可能属性太多改的贫困，相互影响等，总之，有好有坏
当多个属性使用相同值时，由于相同属性具有扩散作用，可以简写成一个

1 背景与边框

1.1 半透明边框

hsla颜色：通过四个值描述颜色：hsla(0, 0%, 50%, 0.5)：第一个元素表示色相，决定是什么颜色，第二个元素是饱和度，0-100%，越高越饱满，越低越灰色，第三个元素是亮度，第四个元素是透明度，值范围0-1
问题 即 如何实现半透明色
一个解决方案如下

1. border: 10px solid hsla(0, 0%, 100%, .5);
2. background: white;

复制代码

但边框的半透明透过来的是background的白色，结果背景的白色遮挡了背景图片，css3的background-clip可解决此问题，该属性会将透明地区的背景色用边框外沿剪掉，背景色就能透过来了

1. border: 10px solid hsla(0, 0%, 100%, .5)
2. background: white;
3. background-clip: padding-box;

复制代码

1.2 多重边框

box-shadow基本用法：box-shadow属性用来给元素添加阴影效果，参数如下：box-shadow: h-shadow v-shadow blur spread color inset; 
h-shadow表示在水平方向投影巨细；v-shadow表示在垂直方向投影巨细；blur表示阴影模糊程度；spread表示阴影扩张程度，color表示阴影颜色；inset默认是外阴影，如果设置，可设为内阴影

1. background: yellowgreen;
2. box-shadow: 0 0 0 10px #655

复制代码

这个效果是#655颜色宽10px的实线边框，背景色是黄绿

因为box-shadow属性支持逗号分割，可以再弄一个边框：

1. background: yellowgreen;
2. box-shadow: 0 0 0 10px #655, 0 0 0 15px #328

复制代码

需注意的是，逗号分割的边框，第一个在最顶层，今后就是底层的
还需注意，box-shadow的视觉效果和border这种边框效果可相似，但box-shadow的阴影没有边框宽度属性，边框也不会出发鼠标等移动事件
box-shadow只能模拟实线边框，无法模拟虚线边框
outline属性可以在border外再描一层边，注意outline和box-shadow重叠时，outline盖在box-shadow上面
1.3 机动的背景定位

background-position

如果想针对某个地方做偏移，可以如许：

1. background: url('test.png') no-repeat #58a;
2. background-position: right 20px bottom 30px;

复制代码

这是css3支持的，有的不支持此属性，元素会贴在左上角，可以在background里添加值right bottom，如许不支持background-position时，元素仍能在右下角
background-origin

background-position的位置是相对padding-box的角，background-origin用来定义background-position相对的是哪个角，以是它默认值是padding-box：

当padding和background-position值一样时，每次须要改三个值，可改background-origin为content-box将background-position的值设为相对content角，则不须要要再给bp定义方向上的偏移值

calc

通过calc计算的边距是相对左上角而言的，注意，calc运算符左右肯定要加空白符，不然解析错误

1.4 边框内圆角

用两个div元素可方便实现内圆角外直角的效果

怎样用一个div实现，而不是用两个div？答案是外直角用outline实现，内圆角和直角的间隙添补outline相同颜色即可

1.5 条纹背景

基础效果

1. .testb {
2. background:linear-gradient(#fb3,#58a);
3. font-size: 3em;
4. }

复制代码

1. <div class="testb"><p>test</p></div>

复制代码

改变颜色渐变位置

1. .testb {
2. background:linear-gradient(#fb3 20%,#58a 80%);
3. font-size: 5em;
4. }

复制代码

如果两种颜色位置重复，则无渐变效果

1. .testb {
2. background:linear-gradient(#fb3 50%,#58a 50%);
3. font-size: 5em;
4. }

复制代码

调解一个单位的宽与高，通过background-size属性调解，第一个是宽第二个是高，条纹会在背景范围内平铺

1. .testb {
2. background:linear-gradient(#fb3 50%,#58a 50%);
3. font-size: 5em;
4. background-size: 100% 10px;
5. }

复制代码

另外一种写法，一样的效果。如果色标位置比前一个色标位置小，则该色标位置会设为前面所有色标位置最大的值，可制止每次霰弹式修改

1. .testb {
2. background:linear-gradient(#fb3 50%,#58a 0);
3. font-size: 5em;
4. background-size: 100% 25px;
5. }

复制代码

三种颜色的条纹

1. .testb {
2. background:linear-gradient(#fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
3. font-size: 5em;
4. background-size: 100% 25px;
5. }

复制代码

垂直条纹，给linear-gradient第一个参数前加方向参数，默认是水平条纹，即to bottom,垂直调味改为to right，对应background-size的条纹宽也要改

1. .testb {
2. background:linear-gradient(to right, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
3. font-size: 5em;
4. background-size: 25px 100%;
5. }

复制代码

尝试45度倾斜条纹，直接改linear-gradient首个参数，发现不可，是因为收到background-size影响

1. .testb {
2. background:linear-gradient(45deg, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
3. font-size: 5em;
4. background-size: 25px 100%;
5. }

复制代码

再次尝试，让background-size每个单位的倾斜条纹重合，数学算一下，对齐一下，还得新增几个色标

1. .testb {
2. background:linear-gradient(45deg, #fb3 25%,#58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
3. font-size: 5em;
4. background-size: 25px 25px;
5. }

复制代码

其实如许计算的条纹方法很鸡肋，更复杂的条纹计算会很贫困，有没有更好的条纹方法？有，有一种线性循环增强版条纹属性repeating-linear-gradient。这个可以很好的应用于倾斜条纹的平铺

1. .testb {
2. background:repeating-linear-gradient(45deg, #fb3, #58a 25px);
3. font-size: 5em;
4. }

复制代码

看一个效果好的

1. .testb {
2. background:repeating-linear-gradient(30deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
3. font-size: 5em;
4. }

复制代码

1.6 复杂的背景图案

条纹

用透明叠加条纹

1. .testa {
2. background:white;
3. background-image:linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0),linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0);
4. background-size:30px 30px;
5. font-size: 90px;
6. }

复制代码

网格

1. .testa {
2. background:#58a;
3. background-image:linear-gradient(white 1px,transparent 0),linear-gradient(90deg,white 1px, transparent 0);
4. background-size:30px 30px;
5. font-size: 90px;
6. }

复制代码

 

1. .testa {
2. background:#58a;
3. background-image:
4.         linear-gradient(white 2px,transparent 0),
5.         linear-gradient(90deg,white 2px, transparent 0),
6.         linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
7.         linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
8. background-size:75px 75px, 75px 75px, 15px 15px, 15px 15px;
9. font-size: 90px;
10. }

复制代码

其中，background-size有多个值，每个值与background-image应该是逐一对应的
波点

看一些径向渐变

1. .testa {
2. background:#655;
3. background-image: radial-gradient(tan 30%, transparent 0);
4. background-size: 30px 30px;
5. font-size:5em;
6. }

复制代码

tan是一种颜色，30%是径向渐变的半径占背景巨细的百分比
叠加波点阵列

1. .testa {
2. background:#655;
3. background-image:
4.         radial-gradient(tan 30%, transparent 0),
5.         radial-gradient(tan 30%, transparent 0);
6. background-size: 30px 30px;
7. background-position: 0 0, 15px 15px;
8. font-size:5em;
9. }

复制代码

使用函数创建波点

1. @mixin polka ($size, $dot, $base, $accent) {
2.         background: $base;
3.         background-image:
4.                 radial-gradient($access $dot, transparent 0),
5.                 radial-gradient($accent $dot, transparent 0);
6.         background-size: $size $size;
7.         background-position: 0 0, $size/2 $size/2;
8. }
9. .testa {@include polka (30px,30%,#655,tan);}

复制代码

效果没出来，不知道在哪定义scss，好像不能直接在html定义，后面再看
棋盘

原理：斜向45度上下三角形拼成棋盘

1. .testa {
2. background: #eee;
3. background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
4. background-size: 30px 30px;
5. font-size: 5em;
6. }

复制代码

1. .testa {
2. background: #eee;
3. background-image:
4.         linear-gradient(45deg, transparent 75%, #bbb 0),
5.         linear-gradient(45deg, #bbb 25%, transparent 0);
6. background-size: 30px 30px;
7. font-size: 5em;
8. }

复制代码

将每个background单元移动一下，把三角形拼成正方形

1. .testa {
2. background: #eee;
3. background-image:
4.         linear-gradient(45deg, transparent 75%, #bbb 0),
5.         linear-gradient(45deg, #bbb 25%, transparent 0);
6. background-size: 30px 30px;
7. background-position: 0 0, 15px 15px;
8. font-size: 5em;
9. }

复制代码

再重复一下创建相邻棋盘

1. .testa {
2. background: #eee;
3. background-image:
4.         linear-gradient(45deg, transparent 75%, #bbb 0),
5.         linear-gradient(45deg, #bbb 25%, transparent 0),
6.         linear-gradient(45deg, transparent 75%, #bbb 0),
7.         linear-gradient(45deg, #bbb 25%, transparent 0);
8. background-size: 30px 30px;
9. background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
10. font-size: 5em;
11. }

复制代码

另一种三角形拼接也可以，但是引入了颜色的函数

1. .testa {
2. background: #eee;
3. background-image:
4.         linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
5.         linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
6. background-size: 30px 30px;
7. background-position: 0 0, 15px 15px;
8. font-size: 5em;
9. }

复制代码

1.7 伪随机背景

1. .testa {
2. background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
3. background-size: 80px 100%;
4. font-size: 5em;
5. }

复制代码

将这种图案再举行叠加遮掩可生成较难察觉的伪随机背景
1.8 一连的图像边框

通过透明border实现背景图案透明的边框
通过多背景图案与差别对齐效果实现信封边框效果

7 结构与布局

7.1 垂直居中



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。