css揭秘之1-10
1 半透明边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
body{
background: url(2.png);
}
.box{
width: 100px;
height: 100px;
background-color:#fff;
border: 20px solid rgb(255,0,0,0.2); //设置透明度
background-clip: padding-box; //裁剪背景
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
关于background-clip：http://www.w3school.com.cn/tiy/t.asp?f=css3_background-clip
background-clip:默认背景到外边框，表示背景延伸到哪。默认情况下，边框设置了颜色设置透明度会透出下面的白色背景，不会真正透明到最下面，因为白色背景延伸到外边距。
background-clip: padding-box;表示白色背景知道内边距不到外边距，如果不这么写，默认属性为border-box；设置了透明度也会透出后面的白色背景，图示：
2：多重边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background:#fff;
border: 10px solid #333;
outline: 10px solid red;
margin: 40px;
box-shadow: 0px 0px 5px 20px #ccc,0px 0px 5px 20px #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
3：灵活的背景定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background:url(1.gif)no-repeat #666;
background-position: right 40px bottom 40px;
padding: 40px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
如果改变图片距离某个角的距离则要改变3个值。
改用background-origin: content-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background:url(1.gif)no-repeat #666;
background-position: right bottom;
padding: 40px;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
因为
background-position默认定位是根据padding-box（内边距的外边框）;
改为 background-origin: content-box;后便从内容区算起了。
PS：每个元素都有三个矩形框：border-box:边框的外沿框，padding-box:内边框的外边沿，content-box:内容区的外边沿。
background-origin：默认背景定位从内边框开始算，改为content-box;便不用更改了。
4 边框内圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background:#666;
margin: 20px;
box-shadow: 0 0 0 10px red;
border-radius: 15px;
outline: 10px solid #333;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
当box-shadow和outline颜色一致时则得到以下效果：
5：条纹背景：
横向条纹：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background-image: linear-gradient(#333 50%,#eee 50%);
background-size: 100% 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
倾斜60度条纹：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background-image: repeating-linear-gradient(60deg,#333,#333 15px,#999 0,#999 30px);
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
6：复杂的背景图案：
网格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
background-image: linear-gradient(90deg,#333 50%,transparent 0),linear-gradient(#999 50%,transparent 0);
background-size: 30px 30px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
波点：略；
棋盘：略；
7：伪随机背景：css3略
8：连续的图像边框：css3略
9：自适应的椭圆：
border-radius:每个角都有水平和垂直半径
1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
border-radius: 50%/50%;
background:#999;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
2 半椭圆：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 200px;
border-radius: 50%/100% 100% 0 0;
background:#999;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
图示：
border-radius: 50%/100% 100% 0 0：表示左上角的border-radius: 50% 100%；右上角的border-radius：50% 100%；
右下角border-radius:50% 0;左下角border-radius：50% 0；
当有某个方向为0时，则另一个不重要了，准确写法是：border-radius: 50% 50% 0 0/100% 100% 0 0;
3 四分之一椭圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border-radius: 100% 0 0 0;
background:#999;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
只有左上角：
图示：
10：平行四边形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css揭秘</title>
<style type="text/css">
.box{
position: relative;
margin: 20px;
}
.box:before{
content: '';
position: absolute;
left: -20px;
top: -5px;
z-index: -1;
width: 100px;
height: 30px;
background:#999;
transform: skew(-45deg);
}
</style>
</head>
<body>
<a href='#' class="box">点击</a>
</body>
</html>
图示：
：