HTML-从零开始的学习过程（10）

最新推荐文章于 2020-10-13 21:08:57 发布

Dokey_L

最新推荐文章于 2020-10-13 21:08:57 发布

阅读量265

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/dokey_l/article/details/106460661

版权

本文介绍了CSS3中的三个重要特性：如何使用border-radius实现圆角边框，box-shadow创建盒阴影效果，以及border-image进行边界图片设置。详细讲解了各个属性的语法、兼容性和示例，帮助初学者掌握CSS3增强网页视觉效果的技巧。

摘要由CSDN通过智能技术生成

CSS3圆角

概念：border-radius:为元素添加圆角边框；
语法：border-radius:数值或者百分比；
兼容性：ie9+、firefox4+、chrome、safari5+、opera；
说明
四个值：第一个值代表左上角，第二个值代表右上角，第三个值代表右下角，第四个值代表左下角；
三个值：第一个值代表左上角，第二个值代表右上角和左下角，第三个值代表右下角；
两个值：第一个值代表左上角和右下角，第二个值代表右上角和左下角；
一个值：四个圆角相同。
border-radius是复合属性，也可以单独设置每个角
border-top-left-radius-- 左上角
border-top-right-radius-- 右上角
border-bottom-right-radius-- 右下角
border-bottm-left-radius-- 左下角

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>radius</title>
	<style type="text/css">
		div{
			/*为了满足各个浏览器的兼容性，加上技术前缀*/
			-webkit-border-radius:50%;/*chrome*/
			   -moz-border-radius:50%;/*firefox*/
			    -ms-border-radius:50%;/*ie*/
			     -o-border-radius:50%;/*opera*/
			border-radius: 50%;
			width: 500px;
			height: 300px;
			border: 1px solid #000;
			text-align: center;
			line-height: 300px;
			position: relative;
			top: 10px;
			left: 10px;
		}
		div::before{
			width: 50px;
			height: 50px;
			border: 1px solid #000;
			border-radius: 50%;
			display: block;
			content: "";
			right: -20px;
			bottom: -60px;
			position: absolute;
		}

		div::after{
			width: 20px;
			height: 20px;
			border: 1px solid #000;
			border-radius: 50%;
			display: block;
			content: "";
			right: -40px;
			bottom: -90px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div>大家好！</div>
</body>
</html>

效果：
在这里插入图片描述

CSS3盒阴影

概念：可以把设置一个或者多个下拉阴影的框；
语法：box-shadow:h-shadow v–shadow blur spread color inset；
兼容性：ie9+ 、 firefox4+ 、chrome 、 safari5+ 、 opera；

CSS3边界图片

概念：构建边框图案；
语法：border-image:source slice width outset repeat；
兼容性：ie不兼容，firefox、 chrome 、safari6+， opera不兼容；

具体的每个属性设置：
border-image-source属性
概念：指定要使用的图像，而不是border-style属性设置的边框样式；
语法：border-iamge-source:none|image；
border-image-slice属性
概念：指定图像的边界向内偏移；
语法： border-iamge-slice:number | % |fill；
border-image-width属性
概念：指定图像边界的宽度；
语法： border-iamge-width:number | % |auto；
border-image-outset属性
概念：指定在边框的外部绘制border-image-area的量 – 边框区域；
语法：border-iamge-outset:number|length；
border-image-repeat属性
概念：图像边界是否会重复；
语法：border-iamge-repeat: stretch | repeat | round | initial | inherit；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>borderImage</title>
	<style type="text/css">
		div{
			width: 953px;
			height: 492px;
			border:50px solid;
			/*border-image可以统一设置属性*/
			/*border-image: url("border.jpg");*/
		/*	border-image-source:指定要使用的图像，而不是border-style属性设置的边框样式*/
			border-image-source: url("border.jpg");
			/*border-image-slice:指定图像的边界向内偏移*/
			border-image-slice: 15%;
			/*border-image-width:指定图像边界的宽度*/
			border-image-width: 15%;
			/*border-image-outset:指定在边框的外部绘制border-image-area的量 -- 边框区域*/
			border-image-outset: 0;
			/*border-image-repeat:用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）*/
			border-image-repeat: stretch;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>