CSS揭秘读书笔记
边框
多重边框
box-shaodw
1
2
3
4
5
6
7
8
| .wrap{
width:100px;
height:100px;
border:10px solid black;
box-shadow:0 0 0 10px red，
0 0 0 15px yellow;
}
|
这里我们注意到 box-shadow的几个值：
- 1.用来设置X轴的阴影值,可以为负
- 2.用来设置Y轴的阴影值,可以为负
- 3.用来设置阴影模糊成都,不能为父
- 4.用来设置阴影外延伸值,可以为负.
- 5.设置阴影颜色
不过这里设置多重边框的同时还应设置一个margin值,用来给多重边框”腾位置”，另外box-shadow可以设置多次数值,创建多个边框. 外延伸值单独计算.
outline
1
2
3
4
5
6
7
| .wrap{
width:100px;
height:100px;
border:10px solid black;
background:yellow;
outline:1px dashed red;
}
|
这个的好处就是 可以给第二重边框设置样式….
条纹背景
水平条纹背景
一个最基本的条纹背景
1
2
3
4
5
| .wrap{
width:100px;
height:100px;
background:linear-gradient(yellow,red)
}
|
被均分的条纹背景
当多个色标具有相同的位置,它们会产生一个无限小的过渡区别，就仿佛被均分一样。例如这样：
1
2
3
4
5
| .wrap{
width:100px;
height:100px;
background:linear-gradient(yellow 50%,red 50%)
}
|
这样我们就得到了一个 被均分的背景颜色.
多个被均分的条纹背景
如果想要得到多个被均分的条纹背景.可以这样
1
2
3
4
5
6
7
| .wrap{
width:100px;
height:100px;
background:linear-gradient(yellow 50%,red 50%);
background-size:100% 30px;
}
|
平行四边形
使用skew()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .wrap{
width:200px
height:100px
background:red
transform:skewX(-45deg)
margin: 100px auto
}
.wrap>p{
height:100px
line-height:100px
text-align:center
transform:skewX(45deg)
}
<div class="wrap">
<p>测试下</p>
</div>
|
这算一种比较笨的方法,外部容器设置transform:skewX(-45deg),内部容器再设置一个transfrom:skewX(45%)这样一正一负抵消掉,使得容器内的字体显示正常.
另外一种更方便的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .wrap{
position:relative
font-size:14px
color:red
width:200px
height:100px
margin:100px auto
line-height:100px
text-align:center
}
.wrap:before{
content:""
position: absolute
top:0
left:0
display: block
z-index:-1
background:#aaa;
transform:skew(-45deg)
width:100%
height:100%
}
<div class="wrap">
测试下
</div>
|
灵活使用伪类元素,使得完成一个平行四边形
切角效果
单个切角效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .wrap{
width: 200px;
height:200px;
margin: 100px auto;
background:#aaa;
line-height:200px;
text-align:center;
background:linear-gradient(-45deg, transparent 15px ,red 0)
}
<div class="wrap">
测试下
</div>
我们这里假设切角长度为15px;
|
多个切角效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .wrap{
width: 200px;
height:200px;
margin: 100px auto;
background:#aaa;
line-height:200px;
text-align:center;
background:
linear-gradient(-45deg, transparent 15px ,red 0)bottom right,
linear-gradient(45deg, transparent 15px ,red 0)bottom left,
linear-gradient(135deg, transparent 15px ,red 0)top left,
linear-gradient(-135deg, transparent 15px ,red 0)top right;
background-size:50% 50%;
background-repeat:no-repeat;
}
<div class="wrap">
测试下
</div>
|
##自定义下划线
使用text-decoration:underline
1
2
3
4
5
6
7
8
9
10
| .wrap{
color:red;
}
.wrap>span{
text-decoration: underline;
color:green;
}
<p class="wrap">
asdadasdad<span>asyyyyppp</span>ppppsadad
</p>
|
这样我们发现.有的p遮盖了一部分,这种方法感觉不是很好用
使用边框
1
2
3
4
5
6
7
8
| .wrap{
color:red;
}
.wrap>span{
display:inline-block;
border-bottom:1px solid black;
color:green;
}
|
各种文字效果
空心字效果
1
2
3
4
5
6
7
8
| .wrap{
display: inline-block;
background:deeppink;
color:white;
text-shadow:0 0 1px black,
0 0 1px black,0 0 1px black,
0 0 1px black;
}
|
*
文字发光效果
1
2
3
4
5
6
7
| .wrap{
display: inline-block;
background:deeppink;
color:white;
text-shadow: 0 0 10px #fff,0 0 10px #fff;
}
可以重复多次设置 text-shadow的值
|