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 合理使用简写
不少属性可以简写到一个属性里,此处推荐合理使用简写。因为如果属性展开写,可能会遗漏,也可能属性太多改的麻烦,相互影响等,总之,有好有坏
当多个属性使用相同值时,由于相同属性具有扩散作用,可以简写成一个
![](https://i-blog.csdnimg.cn/direct/309abf2205824fc6af0972c5820f1d58.png)
![](https://i-blog.csdnimg.cn/direct/247df878988c4e14938c98ae8c20cd5f.png)
1 背景与边框
1.1 半透明边框
hsla颜色:通过四个值描述颜色:hsla(0, 0%, 50%, 0.5):第一个元素表示色相,决定是什么颜色,第二个元素是饱和度,0-100%,越高越饱满,越低越灰色,第三个元素是亮度,第四个元素是透明度,值范围0-1
问题 即 如何实现半透明色
一个解决方案如下
css
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
但边框的半透明透过来的是background的白色,结果背景的白色遮挡了背景图片,css3的background-clip可解决此问题,该属性会将透明区域的背景色用边框外沿剪掉,背景色就能透过来了
css
border: 10px solid hsla(0, 0%, 100%, .5)
background: white;
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默认是外阴影,如果设置,可设为内阴影
css
background: yellowgreen;
box-shadow: 0 0 0 10px #655
这个效果是#655颜色宽10px的实线边框,背景色是黄绿
![](https://i-blog.csdnimg.cn/direct/5b94a8ce4a4c4a78a80988331a13d9d6.png)
因为box-shadow属性支持逗号分割,可以再弄一个边框:
![](https://i-blog.csdnimg.cn/direct/a0807af869514dcaaa1f829f9e2c2504.png)
css
background: yellowgreen;
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
如果想针对某个地方做偏移,可以这样:
css
background: url('test.png') no-repeat #58a;
background-position: right 20px bottom 30px;
这是css3支持的,有的不支持此属性,元素会贴在左上角,可以在background里添加值right bottom,这样不支持background-position时,元素仍能在右下角
background-origin
background-position的位置是相对padding-box的角,background-origin用来定义background-position相对的是哪个角,所以它默认值是padding-box:
![](https://i-blog.csdnimg.cn/direct/c1384b2cd0194be2bf6c7ebda3af4c49.png)
当padding和background-position值一样时,每次需要改三个值,可改background-origin为content-box将background-position的值设为相对content角,则不需要要再给bp定义方向上的偏移值
![](https://i-blog.csdnimg.cn/direct/29002ce246e24baebd192e8f3e8f8ef1.png)
calc
通过calc计算的边距是相对左上角而言的,注意,calc运算符左右一定要加空白符,不然解析错误
![](https://i-blog.csdnimg.cn/direct/f179f751a3af49828fd5ad369eb6b435.png)
1.4 边框内圆角
用两个div元素可方便实现内圆角外直角的效果
![](https://i-blog.csdnimg.cn/direct/4065d50148a6441a968b355cd3789dcb.png)
怎样用一个div实现,而不是用两个div?答案是外直角用outline实现,内圆角和直角的间隙填充outline相同颜色即可
![](https://i-blog.csdnimg.cn/direct/63259b79ead54638a5464bc02cba70b9.png)
1.5 条纹背景
基础效果
![](https://i-blog.csdnimg.cn/direct/276d6cb3eddb48dca0c05eddf3738e96.png)
css
.testb {
background:linear-gradient(#fb3,#58a);
font-size: 3em;
}
html
<div class="testb"><p>test</p></div>
改变颜色渐变位置
![](https://i-blog.csdnimg.cn/direct/6244ef6c31ee431b888f28c67a5b7443.png)
css
.testb {
background:linear-gradient(#fb3 20%,#58a 80%);
font-size: 5em;
}
如果两种颜色位置重复,则无渐变效果
![](https://i-blog.csdnimg.cn/direct/70d366bbab854b89b4534ed23bccb34b.png)
css
.testb {
background:linear-gradient(#fb3 50%,#58a 50%);
font-size: 5em;
}
调整一个单位的宽与高,通过background-size属性调整,第一个是宽第二个是高,条纹会在背景范围内平铺
![](https://i-blog.csdnimg.cn/direct/c3a05038076c42a2ab860bf7520ea553.png)
css
.testb {
background:linear-gradient(#fb3 50%,#58a 50%);
font-size: 5em;
background-size: 100% 10px;
}
另外一种写法,一样的效果。如果色标位置比前一个色标位置小,则该色标位置会设为前面所有色标位置最大的值,可避免每次霰弹式修改
![](https://i-blog.csdnimg.cn/direct/9a2dafccedc44ca8ab62081f80328a7a.png)
css
.testb {
background:linear-gradient(#fb3 50%,#58a 0);
font-size: 5em;
background-size: 100% 25px;
}
三种颜色的条纹
![](https://i-blog.csdnimg.cn/direct/5f3a160f8c2945d89e6972fb1f10482b.png)
css
.testb {
background:linear-gradient(#fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 100% 25px;
}
垂直条纹,给linear-gradient第一个参数前加方向参数,默认是水平条纹,即to bottom,垂直调味改为to right,对应background-size的条纹宽也要改
![](https://i-blog.csdnimg.cn/direct/87f7db50e33e44d8b2c533da0fe3921a.png)
css
.testb {
background:linear-gradient(to right, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 25px 100%;
}
尝试45度倾斜条纹,直接改linear-gradient首个参数,发现不行,是因为收到background-size影响
![](https://i-blog.csdnimg.cn/direct/98dc4c3feb25469dba4f086e0a6beffc.png)
css
.testb {
background:linear-gradient(45deg, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 25px 100%;
}
再次尝试,让background-size每个单位的倾斜条纹重合,数学算一下,对齐一下,还得新增几个色标
![](https://i-blog.csdnimg.cn/direct/571471760d2d43258d384f31f704d56a.png)
css
.testb {
background:linear-gradient(45deg, #fb3 25%,#58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
font-size: 5em;
background-size: 25px 25px;
}
其实这样计算的条纹方法很鸡肋,更复杂的条纹计算会很麻烦,有没有更好的条纹方法?有,有一种线性循环加强版条纹属性repeating-linear-gradient。这个可以很好的应用于倾斜条纹的平铺
![](https://i-blog.csdnimg.cn/direct/467bc95663914fdaa0c816e5dbaf46ee.png)
css
.testb {
background:repeating-linear-gradient(45deg, #fb3, #58a 25px);
font-size: 5em;
}
看一个效果好的
![](https://i-blog.csdnimg.cn/direct/6a08fccd4b5b4f928e90494e4336d842.png)
css
.testb {
background:repeating-linear-gradient(30deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
font-size: 5em;
}