《css揭秘》第一章

1   半透明边框

    /*默认情况下，背景会延伸到边框所在区域下层。所以可以用  
     background-clip来防止这种情况出现。*/
       

		<div>
		Can I haz semi-transparent borders?
		Pretty please?
				</div>
		/**
		 * Translucent borders
		 */
		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;
		}

2 用box-shadow实现多重边框

**
 * Multiple borders
 */
/*重点在于box-shadow可以设置多个值*/
div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
}

3用out-line实现两重边框

4背景定位，将背景定位到容器的某一个固定的位置。

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;/*bootem rigth 为回退方案*/
	background-position: right 20px bottom 10px;
	
	/* Styling */
	max-width: 10em;
	min-height: 5em;
	padding: 10px;
	color: white;
	font: 100%/1 sans-serif;
}

background-position默认是以padding box的左上角为准的。但是可以用background-origin改变这种默认。让背景跟着contentt-box定位。

5边框内圆角

利用box-shadow以及out-line可以实现外边框加内圆角效果。

5条纹背景

6牛逼的条纹背景

background: repeating-linear-gradient(60deg, 
              #fb3, #fb3 15px,
              #58a 0, #58a 30px);

height: 100%;

7复杂背景图案