【前端笔记】《CSS揭秘》案例

 

1.半透明边框  

 

border: 10px solid hsla(0,0%,100%,.5);

background: white;

background-clip: padding-box;

 

 

http://dabblet.com/gist/012289cc14106a1bd7a5

 

核心代码：

body {
	background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
	border: 10px solid hsla(0,0%,100%,.5);
	background: white;
	background-clip: padding-box;
	
	/* styling */
	max-width: 20em;
	padding: 2em;
	margin: 2em auto 0;
	font: 100%/1.5 sans-serif;
}{
	background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
	border: 10px solid hsla(0,0%,100%,.5);
	background: white;
	background-clip: padding-box;
	
	/* styling */
	max-width: 20em;
	padding: 2em;
	margin: 2em auto 0;
	font: 100%/1.5 sans-serif;
}

2.多重边框

 

background: yellowgreen;

box-shadow: 0 0 10px #655,0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6)

 

http://dabblet.com/gist/525eb8e9cdade71723c1

 

3.灵活的背景定位

（1）不受padding影响的背景定位

 background: url("code-pirate.svg") no-repeat bottom right #58a;

 background-position: right 20px bottom 10px;

 background-origin: padding-box;

 

http://dabblet.com/gist/0f226e63595d1bef88cb

 

（2）在content里定位的背景，即会受padding的影响的定位

 background: url() no-repeat bottom right #58a;

 background-position: right 20px bottom 10px;

 background-origin: content-box;

 

http://dabblet.com/gist/0f19ac5d28d0aa7b6c60

 

（3）不想background-position写方位，单位也可以用calc()

 background-position: calc(100% - 20px) calc(100% - 10px);

 

  http://dabblet.com/gist/b5fcb42d055427ab6c1a

 

4.边框内圆角

div {

  outline: .6em solid #655;

  box-shadow: 0 0 0 .4em #655;

  

  max-width: 10em;

  border-radius: .8em;

  padding: 1em;

  margin: 1em;

  background: tan;

}

   http://dabblet.com/gist/170fe436f290083cc24c

 

5.条纹背景

(1)基本的垂直线性渐变

background: linear-gradient(#fb3,#58a);

(2)设置渐变区域的

background:linear-gradient(#fb3 20%,#58a 80%);

(3)背景分为两块色块

background:linear-gradient(#fb3 50%,#58a 80%);

(4)调整渐变尺寸的

background:linear-gradient(#fb3 50%,#58a 50%);

background-size: 100% 30px;

 

跟这样写是一样的效果：

background:linear-gradient(#fb3 50%,#58a 0);

background-size: 100% 30px;

(5)有三个颜色的条纹

background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);

background-size: 100% 45px;

 

http://dabblet.com/gist/119dbf7f0c76dba7b7ee