CSS3基础

最新推荐文章于 2021-11-05 17:21:47 发布

Benefit.

最新推荐文章于 2021-11-05 17:21:47 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/lipeikun/article/details/105221578

版权

CSS3边框
border-radius：用于创建圆角
属性

四个值：左上角，右上角，右下角，左下角
三个值：左上角，右上角和左下角，右下角
两个值：左上角与右下角，右上角和左下角
一个值：四个圆角值相同
border-image：使用图片创建边框
属性
border-image-source:边框图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图像是否应该平铺、铺满或拉伸
box-shadow:用来添加阴影
属性
h-shadow：水平阴影的位置，允许负值
v-shadow：垂直阴影的位置，允许负值
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色
inset：将外部阴影（outset）改为内部阴影

创建圆角
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			width:200px;
			height:200px;
		}
		img:first-child{
			border-radius: 50%;
		}
		img:nth-child(2){
			border-radius: 20px 40px;
		}
		img:nth-child(3){
			border-radius: 20px 40px 60px;
		}
		img:last-of-type{
			border-radius: 20px 40px 60px 80px;
		}
	</style>
</head>
<body>
	<img src="img/1.jpg" alt="">
	<img src="img/1.jpg" alt="">
	<img src="img/1.jpg" alt="">
	<img src="img/1.jpg" alt="">
</body>
</html>

代码效果图

图片创建边框
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-child{
			width:300px;
			height:50px;
			line-height: 50px;
			text-align: center;
			border-image:url(img/border.png) 10 round;
		}
			p:last-child{
			width:300px;
			height:50px;
			line-height: 50px;
			text-align: center;
			border-image:url(img/border.png) 10 stretch;
		}
	</style>
</head>
<body>
	<p>课工场，每时每课给你新机会</p>
	<p>课工场，每时每课给你新机会</p>
	</body>
</html>

添加阴影
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#box{
			width:150px;
			height:150px;
			background: red;
			box-shadow:10px 10px 3px 3px #888 inset;
		}
	</style>
</head>
<body>
	<div id="box"></div>
</body>
</html>

代码效果图
CSS3背景
background-size属性

length:设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果给出一个值，第二个是设置为"atuo"
percentage:同length。
cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
background-origin/clip属性
padding-box:背景图像相对于内边距框来定位/背景被裁剪到内边距框
border-box:背景图像相对于边框盒来定位/背景被裁剪到边框盒
content-box:背景图像相对于内容框来定位/背景被裁剪到内容框
background-size属性

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   	p{
   		height:30px;
   		width:100px;
   		padding:50px;
   		border: 1px solid red;
   		margin:20px;
   		background:url(img/bg.jpg) no-repeat;
   	}
   	.img1{
   		background-size:50px 80px;
   	}
   	.img2{
   		background-size:80% 10%;
   	}
   	.img3{
   		background-size:cover;
   	}
   	.img4{
   		background-size:contain;
   	}
   </style>
</head>
<body>
   <p class="img1"></p>
   <p class="img2"></p>
   <p class="img3"></p>
   <p class="img4"></p>
</body>
</html>

代码效果图
background-origin/clip属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			background:url(img/bg.jpg) repeat;
			width:100px;
			border:10px dashed #ccc;
			padding:30px;
			margin:30px;
		}
		.img1{
			background-origin:content-box;
			background-clip:content-box;
		}
		.img2{
			background-origin:border-box;
			background-clip:border-box;
		}
		.img3{
			background-origin:padding-box;
			background-clip:padding-box;
		}
	</style>
</head>
<body>
	<p class="img1">
		我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
	</p>
	<p class="img2">
		我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
	</p>
	<p class="img3">
		我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
	</p>
</body>
</html>

图片太长，可自行运行查看效果
CSS3渐变
线性渐变—Linear Gradients

语法：background:linear-gradient(direction,color-stop1,color-stop2,…);
径向渐变—Radial Gradients
语法：background:radil-gradient(center,shapesize,start-color,…,last-color);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			height:200px;
			margin-top:10px;
		}
		#box1{
			background:linear-gradient(red,blue);
		}
		#box2{
			background:linear-gradient(to left,red,blue);
		}
		#box3{
			background:linear-gradient(to bottom right,red,blue);
		}
		#box4{
			background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
		}
		#box5{
			background:radial-gradient(red,green,blue);
		}
		#box6{
			background:radial-gradient(red 5%,green 15%,blue 60%)
		}
		#box7{
			background:radial-gradient(circle,red,blue,green);
		}
	</style>
</head>
<body>
	<!-- 从上到下的线性渐变 -->
	<div id="box1"></div>
	<!-- 从右到左的线性渐变 -->
	<div id="box2"></div>
	<!-- 从左上角到右下角 -->
	<div id="box3"></div>
	<!-- 线性渐变 -->
	<div id="box4"></div>
	<!-- 径向渐变 -->
	<div id="box5"></div>
	<div id="box6"></div>
	<div id="box7"></div>
</body>
</html>

CSS3文本效果
text-shadow属性

h-shadow:水平阴影的位置，允许负值
v-shadow:垂直阴影的位置，允许负值
blur:模糊距离
color:阴影的颜色
word-wrap属性
normal:只在允许的断字点换行（默认）
break-word:在长单词或URL地址内部进行换行
text-overflow属性
white-space:nowrap 文本不会换行，在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis:用省略号来代替被修剪的文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h1{
			text-shadow:5px 5px 5px #f00;
		}
		p{
			width:200px;
			border:1px red solid;
			word-wrap:break-word;
		}
		h2{
			width:150px;
			line-height:50px;
			border:1px #000 solid;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
	</style>
</head>
<body>
	<h1>Hello,text-shadow</h1>
	<p>This is a longlonglonglonglonglong text</p>
	<h2>课工场，每时每课给你新机会</h2>
</body>
</html>

代码效果图
CSS3字体
@font-face{
font-family:必需。规定字体的名称
src:定义字体文件的URL
font-weight:可选。定义字体的粗细。默认是”normal“
font-style:可选。定义字体的样式。默认是”normal”
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face{
			font-family:myfont;
			src: url(fonts/shimesone_personal-webfont.eot);
            src: url(fonts/shimesone_personal-webfont.svg);
            src: url(fonts/shimesone_personal-webfont.ttf);
            src: url(fonts/shimesone_personal-webfont.woff);
            font-weight:normal;
            font-size:normal;
		}
		h1{
			font-family:myfont;
			fontsize:80px;
		}
		</style>
</head>
<body>
	<h1>This is a long text</h1>
</body>
</html>

代码效果图

Benefit.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础

CSS3边框border-radius属性四个值：左上角，右上角，右下角，左下角三个值：左上角，右上角和左下角，右下角两个值：左上角与右下角，右上角和左下角一个值：四个圆角值相同border-image属性border-image-source:边框图片的路径border-image-slice:图片边框向内偏移border-image-width:图片边框的宽度bord...
复制链接

扫一扫