css-揭秘之1-10

最新推荐文章于 2024-08-20 02:15:19 发布

shaonian1996

最新推荐文章于 2024-08-20 02:15:19 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/80720848

html/css 专栏收录该内容

29 篇文章

订阅专栏

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>

图示：

：