本周学习了一些CSS3的新特性 在此做出总结记录。
1. background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框下面
一般设置背景只会存在于content和padding这条属性可以将背景衍生至边框。
参数值
border-box：
背景延伸到边框外沿（但是在边框之下）。
padding-box:
边框下面没有背景，即背景延伸到内边距外沿。
content-box:
背景裁剪到内容区 (content-box) 外沿。
//html
<p>border-box</p>
<div class="border"></div>
<p>padding-box</p>
<div class="padding"></div>
<p>content-box</p>
<div class="content"></div>
//css
div{
width: 100px;
height: 100px;
border: 10px navy;
border-style: dotted;
margin: 10px;
padding: 20px;
background: black;
}
.border{
background-clip: border-box;
}
.padding{
background-clip: padding-box;
}
.content{
background-clip: content-box;
}
2.box-shadow
给边框添加阴影
注：可以用逗号分隔而生成多个阴影。
通过偏移量可以设计出很多好看的图案。
参数值
h-shadow：x轴方向的偏移量
v-shadow：y轴方向的偏移量
blur：模糊距离
spread：阴影尺寸
color：阴影的颜色 默认为透明的
inset：内阴影和外阴影
//html
<div class="test"></div>
//css
div{
width: 200px;
height: 200px;
background-color: black;
box-shadow: 10px 10px 5px red,
-10px -10px 10px green;
}
3.outline
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。区别于边框。
注：轮廓线不会占据空间。
参数值：
- outline-color 颜色
- outline-style 样式
- outline-width 大小
//html
<div class="test"></div>
//css
div{
width: 200px;
height: 200px;
background: red;
outline: black solid 10px; //黑色的轮廓
}
4.outline-offset
设置outline属性的偏移量。当出现复数的时候会有神奇的事情就像下面的例子
（在调整属性的时候可以多尝试不同的正负数值）
参数值
- length ：偏移量
- inhert：规定应从父元素继承 outline-offset 属性的值。
//html 用outline-offset属性画一个小图标
<div class="add"></div>
//css
.add{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -27px;
cursor: pointer;
}
ps：outline和box-shadow是很神奇的属性 合理的组合能够画出很多好看的的图像和简单的实现某些看起来很复杂的图像。
参考链接：
https://segmentfault.com/a/1190000005340697
https://juejin.im/entry/58d4c4aa61ff4b0060522f1e
https://blog.csdn.net/liu_jiachen/article/details/78634457
5.linear-gradient
这是一个函数
创建一个表示两种或多种颜色线性渐变。
参数值
- side-or-corner：描述渐线的起始点位置
- angle：用角度指定渐变的方向
- color-stop：用于指定渐变的起止颜色。
//html
<div class="test"></div>
//css
.test{
width: 300px;
height: 100px;
background:linear-gradient(90deg,red,green);
/*渐变旋转90度*/
background: linear-gradient(red,green);
/*从红色渐变为绿色*/
background: linear-gradient(red 30%,green 50%,black 20%);
/*半分比的合理控制*/
}
6.transform
修改css视觉格式模型的坐标空间
属性：元素可以被旋转 转换 缩放 倾斜
参数值参考：
http://www.w3school.com.cn/cssref/pr_transform.asp
//html
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
//css
.test{
width: 100px;
height: 100px;
background: red;
margin: 50px 50px;
transform:rotate(45deg);
}
.test2{
width: 100px;
height:100px;
margin: 100px 100px;
background: green;
transform: scale(1,1); /*以屏幕当前大小来计算*/
}
.test3{
width: 100px;
height: 100px;
margin: 50px 50px;
background: black;
transform: skew(40deg);
}
7 path-clip
创建一个只有元素的部分区域可以显示的剪切区域,类似于ps里面的剪切功能。
ps：这个属性IE 不支持
参数
4个参数分别代表坐标
//圆角效果
//html
<div class="test"></div>
//css
.test{
width: 200px;
height: 200px;
background: red;
clip-path: inset(0 0 0 0 round 10px);
}