039_CSS3边框

最新推荐文章于 2024-10-13 22:11:37 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-10-13 22:11:37 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： css学习文章标签： css css3 web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109139421

css学习专栏收录该内容

52 篇文章

订阅专栏

1. 通过CSS3, 您能够创建圆角边框, 向矩形添加阴影, 使用图片来绘制边框, 并且不需使用设计软件, 比如: photoshop。

2. 边框左上角形状

2.1. border-top-left-radius属性定义左上角边框的形状。

2.2. border-top-left-radius属性的长度值或者百分比值定义四分之一椭圆(定义外部边框边缘的边角形状)的半径。第一个值是水平半径, 第二个值是垂直半径。如果省略第二个值, 则复制第一个值。如果长度为零, 则边角为方形, 而不是圆形。水平半径的百分比值参考边框盒的宽度, 而垂直半径的百分比值参考边框盒的高度。

2.3. 默认值

2.4. 可能值

3. 边框右上角形状

3.1. border-top-right-radius属性定义右上角边框的形状。

3.2. 默认值

3.3. 可能值

4. 边框右下角形状

4.1. border-bottom-right-radius属性定义右下角边框的形状。

4.2. 默认值

4.3. 可能值

5. 边框左下角形状

5.1. border-bottom-left-radius属性定义左下角边框的形状。

5.2. 默认值

5.3. 可能值

6.创建圆角边框

6.1. border-radius属性是一个简写属性, 用于设置border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius属性。

6.2. 语法:

6.2.1. top-left、top-right、bottom-right、bottom-left各是一对。

6.2.2. 如果省略bottom-left, 则与top-right相同。如果省略bottom-right, 则与top-left相同。如果省略top-right, 则与top-left相同。

6.3. 默认值

6.4. 可能值

6.5. 例子

6.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>border-radius属性创建圆角边框</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div	{
				text-align: center;
				border: 2px solid #a1a1a1;
				padding: 10px 40px; 
				background: #dddddd;
				width: 350px;
				border-radius: 30px 28px 26px 24px / 29px 27px 25px 23px;
			}
			span {
				display: block;
				text-align: center;
				border: 2px solid #a1a1a1;
				padding: 10px 40px; 
				background: #dddddd;
				width: 350px;
				border-top-left-radius: 30px 29px;
				border-top-right-radius: 28px 27px;
				border-bottom-right-radius: 26px 25px;
				border-bottom-left-radius: 24px 23px;
			}
		</style>
	</head>
	<body>
		<div>border-radius属性允许您向元素添加圆角。</div><br />
		<span>border-radius属性允许您向元素添加圆角。</span>
	</body>
</html>

6.5.2. 效果图

7. 边框阴影

7.1. box-shadow属性向框添加一个或多个阴影。

7.2. 语法

box-shadow: h-shadow v-shadow blur spread color inset;

7.3. box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表, 每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

7.4. 默认值

7.5. 可能值

7.6. 例子

7.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>box-shadow属性创建边框阴影</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				box-shadow: 10px 10px 5px 1px #888888;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

7.6.2. 效果图

8. 创建图片边框--使用图片

8.1. border-image-source属性规定要使用的图像。

8.2. 默认值

8.3. 可能值

9. 创建图片边框--向内偏移

9.1. border-image-slice属性规定图像边框的向内偏移。

9.2. 该属性规定图像的上、右、下、左侧边缘的向内偏移, 图像被分割为九个区域: 四个角、四条边以及一个中间区域。

9.3. 该属性可以设置5个参数, 前1~4个参数是按照上、右、下、左的位置分割图片。第五个参数fill, 否则中间的图像部分会被丢弃。如果省略第四个数值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。

9.4. 默认值

9.5. 可能值

10. 创建图片边框--图像边框的宽度

10.1. border-image-width属性规定图像边框的宽度。

10.2. 该属性可以设置4个值, 按照上、右、下、左的位置设置图像边框的宽度。如果忽略第四个值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。不允许任何负值作为 border-image-width值。

10.3. 默认值

10.4. 可能值

11. 创建图片边框--图像超过边框盒的量

11.1. border-image-outset属性规定边框图像超过边框盒的量。

11.2. 该属性可以设置4个值, 按照上、右、下、左的位置设置边框图像超过边框盒的量。如果忽略第四个值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。

11.3. 默认值

11.4. 可能值

12. 创建图片边框--图像边框平铺、拉伸

12.1. border-image-repeat属性规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。

12.2. 该属性可以设置两个参数, 第一个值代表水平方向, 第二个值代表垂直方向。如果只设置一个参数, 代表四个方向一样。

12.3. 默认值

12.4. 可能值

13. 创建图片边框

13.1. border-image属性是一个简写属性, 用于设置以下属性: border-image-source、border-image-slice和border-image-repeat。

13.2. 所有的创建图片边框属性在使用之前都必须设置边框宽度。

13.3. 默认值

13.4. 可能值

13.5. 例子

13.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>border-image属性创建边框图片</title>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			span {
				margin: 80px;
				border: 26px solid transparent;
				display: inline-block;
				line-height: 26px;
				background-color: red;
			}
			#round {
				border-image: url('border.png') 26 26 26 26 fill round;
			}
			#stretch {
				border-image-source: url('border.png');
				border-image-slice: 26 26 26 26;
				border-image-width: 0.5 1 2 4;
				border-image-outset: 1 9 5 3;
				border-image-repeat: repeat stretch;
			}
		</style>
	</head>
	<body>
		<span id="round">创建图片边框</span>
		<span id="stretch">创建图片边框</span>
		<br /><br /><br /><br /><br />
		<p>这是我们使用的图片:</p>
		<img src="border.png" alt="border.png" />
	</body>
</html>

13.5.2. 效果图