CSS3 第二部分 2018-04-24
2018-05-04 本文已影响0人
多佳小昕
一、边框阴影
- 五个参数
水平：正值 右；负值左；
垂直：正直 下；负值上；
模糊度：模糊度和偏移量是可以相加计算，不能为负
扩展量：可以和偏移量相加，扩展四周，可以为负
颜色
内阴影：加inset
模糊度就是一个颜色值在一定距离内记性一个渐变至透明的过程
.box-shadow {
width: 100px;
height: 100px;
border: 1px solid #ddd;
margin: auto;
}
.item:nth-child(1) .box-shadow {
box-shadow: 2px 2px 5px #000;
}
.item:nth-child(2) .box-shadow {
box-shadow: -2px -2px 5px #000;
}
.item:nth-child(3) .box-shadow {
box-shadow:0 2px 5px #000;
}
.item:nth-child(4) .box-shadow {
box-shadow:0 -2px 5px #000;
}
.item:nth-child(5) .box-shadow {
box-shadow:-5px -5px 0px #000;
}
.item:nth-child(6) .box-shadow {
box-shadow:5px 5px 5px 10px #000;
}
.item:nth-child(7) .box-shadow {
box-shadow:15px 15px 5px -5px #000;
}
.item:nth-child(8) .box-shadow {
box-shadow:inset 15px 15px 5px 0px #000;
}
.item:nth-child(9) .box-shadow {
box-shadow:inset 15px 15px 15px #000
,15px 15px 15px red;
}
.item:nth-child(10) .box-shadow {
box-shadow:inset 15px 15px 15px -10px #000,
inset 15px 15px 15px -10px green,
15px 15px 15px red,
15px 15px 15px blue;
}
.item:nth-child(11) .box-shadow {
width: 80px;
height: 80px;
margin-right: 10px;
background-color: red;
}
.item:nth-child(11) .left {
box-shadow: 50px 50px 50px blue;
}
百分比是按横竖两个对应的方向的长度进行计算
二、边框图片
设置的图片将会被“切割”成九宫格形式
image.png
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。
- round 会自动调整尺寸，完整显示边框图片。
- repeat 单纯平铺多余部分，会被“裁切”而不显示。
- stretch 拉伸
/*标准*/
.item:nth-child(1) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
}
/*round：始终完整显示*/
.item:nth-child(2) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
border-image-repeat: round;
}
.item:nth-child(3) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
border-image-repeat: stretch;
}
/*repeat：可能会截断*/
.item:nth-child(4) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
border-image-repeat: repeat;
}
.item:nth-child(5) .border-image {
width: 100px;
height: 100px;
border-image-slice: 27;
}
/*分别设置水平和垂直*/
.item:nth-child(6) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
border-image-repeat:round stretch;
}
/*slice参数*/
.item:nth-child(7) .border-image {
width: 150px;
height: 150px;
border-image-width:20px;
border-image-slice: 27 40 40 27 ;
}
.item:nth-child(8) .border-image {
width: 200px;
height: 100px;
border-image-slice: 27;
border-image-repeat:round stretch;
}
三、背景
背景图片尺寸、背景裁切区域、背景定位参照点、多重背景
- background-clip 可以修改背景区域，默认背景填充
- background-origin 修改背景图片定位圆原点
（border-box、content-box、padding-box） - background-size
cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
background-size会以background-clip设定的盒模型计算
四、盒模型
image.png
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
其区别主要在于宽度和高度的计算方式
- 多重背景
.duo {
width: 623px;
height: 417px;
margin: 100px auto;
background: url('images/bg1.png') left top no-repeat,
url('images/bg2.png') right top no-repeat,
url('images/bg3.png') right bottom no-repeat,
url('images/bg4.png') left bottom no-repeat,
url('images/bg5.png') center center no-repeat;
background-color: #fff;
}
- 从一块背景中抠出一小块的效果：
.clip-img {
width: 130px;
height: 130px;
margin: 200px auto;
position: relative;
background: url(images/bg11.jpg) no-repeat;
}
.clip-img::after,
.clip-img::before {
border:1px solid black;
position: absolute;
content: '';
width: 100%;
height: 100%;
padding: 30px;
box-sizing:border-box;
}
.clip-img::after {
z-index: 10;
background: url(images/bg11.jpg) no-repeat;
background-clip:content-box;
background-origin: padding-box;
left: 80px;
top: 70px;
}
.clip-img::before {
background-color: #fff;
background-clip:content-box;
left: 90px;
}
五、渐变
线性渐变：沿着某条直线朝一个方向产生渐变效果。
径向渐变：指从一个中心点开始沿着四周产生渐变效果
重复渐变。
0-20
20-40
40-100
.linear-gradient {
width: 180px;
height: 50px;
margin: auto;
}
/*标准（默认180°）*/
.item:nth-child(1) .linear-gradient {
background-image: linear-gradient(pink,blue);
}
/*多个*/
.item:nth-child(2) .linear-gradient {
background-image: linear-gradient(pink,blue,red,green);
}
/*线性 用角度确定方向*/
.item:nth-child(3) .linear-gradient {
background-image: linear-gradient(0,pink,blue);
}
/*正上方为0°，顺时针*/
.item:nth-child(4) .linear-gradient {
background-image: linear-gradient(90deg,pink,blue);
}
/*关键字确定方向*/
.item:nth-child(5) .linear-gradient {
background-image: linear-gradient(to top,pink,blue);
}
.item:nth-child(6) .linear-gradient {
background-image: linear-gradient(to left top,pink,blue);
}
.item:nth-child(7) .linear-gradient {
background-image: linear-gradient(135deg,pink,blue);
}
/*控制渐变*/
.item:nth-child(8) .linear-gradient {
background-image: linear-gradient(to left,pink 30%,blue 40% );
}
.item:nth-child(9) .linear-gradient {
background-image: linear-gradient(to left,pink 50%,blue 40%,green 90% );
/*如果最后中间的小于第一个，会被盖住。*/
}
