css

发表于

对于一些css 的总结

1、background-clip

取值：

border-box: 背景颜色 占到 border 即占满整个盒子

padding-box ：背景颜色占到padding 的部分 不占用 border 部分，这样 border部分可以自己定义，与背景分开

应用： 背景为白色，border 设置 为 透明白色

content-box text ：背景只是占到 text 文本

将color: transparent 可以看到 背景趁在文字下面

background-clip

2、background-position

指定背景相对background-origin位置的偏移(默认是padding-box)

1
2
background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

3、background-origin

若一个盒子有一张背景图片，那这张背景图片应当相对于哪个位置开始铺

1
2
background-origin: border-box  //占到整个盒子 
background-position: left 10px top 20px; //这里的 left top 是相对于 borde-box  的
1
2
background-origin: padding-box;
background-repeat: no-repeat;
1
2
background-origin: content-box;
background-repeat: no-repeat;

4、outline

原来是 

1
2
3
outline-style
outline-width
outline-color 的缩写

实现 外部是 直角边框，内部是圆角边框的效果

1
2
3
border-radius:
box-shadow: 0 0 0 x #
outline: x solid #

5、平行四边形

1
2
3
<a href="#yolo" class="button">
<div>Click me</div>
</a>
1
2
3
4
5
6
7
8
9
10
11
12
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
.button {
	display: inline-block;
	padding: .5em 1em;
	border: 0; margin: .5em;
	background: #58a;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font: bold 200%/1 sans-serif;
}

6、菱形图片

1
2
3
4
5
6
7
8
9
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

7、css 渐变

1
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

8、利用 css 渐变切掉一个角

1
2
3
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0);

切2个角

1
2
3
4
5
6
7
8
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0)
right,
linear-gradient(45deg, transparent 15px, #655 0)
left;
background-size: 50% 100%;
background-repeat: no-repeat;

切掉4个角

1
2
3
4
5
6
7
8
9
div {
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;	
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
1
2
3
4
5
6
7
8
9
10
11
div {
	background: #58a;
	-webkit-clip-path: 
		polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
		calc(100% - 20px) 100%,
		20px 100%, 0 calc(100% - 20px), 0 20px);
	clip-path:
	 		polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
	 		calc(100% - 20px) 100%,
	 		20px 100%, 0 calc(100% - 20px), 0 20px);
}

弧形切角

1
2
3
4
5
6
7
8
9
10
11
12
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;