css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

最新推荐文章于 2024-03-22 16:54:56 发布

bymyself11

最新推荐文章于 2024-03-22 16:54:56 发布

阅读量1.6w

点赞数 2

分类专栏： CSS学习之路文章标签： css3

本文链接：https://blog.csdn.net/bymyself11/article/details/51954674

版权

CSS学习之路专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.圆角效果（border-radius）

border-radius是向元素添加圆角边框

使用方法如下：注：下面4个div分别实现了不同的圆角效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/test_border_radius.css" rel="stylesheet">
</head>
<body>
<div class="div1">普通圆角效果</div>
<br>
<div class="div2">四个角圆角单独设置</div>
<br>
<div class="div3">实心上半圆</div>
<br>
<div class="div4">实心圆</div>
</body>
</html>

下面是css3样式：

@CHARSET "UTF-8";

.div1 {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 10px; /*所以角都使用半径为10px的圆角*/
}

.div2 {
	width:100px;
	height:100px;
	background-color: blue;
	/*四个半径值分别是左上角，右上角，右下角，左下角，顺时针*/
	border-radius: 10px 9px 5px 8px;
}
.div3{
	width:100px;
	height:50px;
	background-color: green;
	border-radius:50px 50px 0px 0px;
}
.div4{
	width:100px;
	height:100px;
	background-color:yellow;
	border-radius:50px 50px 50px 50px;
	
}

运行效果图如下：

2.阴影(box-shadow)

box-shadow是向盒子添加阴影，支持添加一个或者多个。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊面积] [阴影扩展半径] [阴影颜色] [投影方式]

参数介绍：注：inset可以在参数的第一个或者最后一个其他位置无效。

阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

X轴偏移量和Y轴偏移量值：正负值说明阴影方向不同

接下来实例如下：

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="css/box_shadow.css" rel="stylesheet">
</head>
<body>
<div class="div_normal">普通div</div>
<br>
<div class="div_shadow1">x,y轴方向设置外阴影</div>
<br>
<div class="div_shadow2">x,y轴方向设置内阴影</div>
<br>
<div class="div_shadow3">四周设置阴影</div>
<br>
<div class="div_shadow">添加多个阴影</div>
</body>
</html>

CSS代码:

@CHARSET "UTF-8";
.div_normal{
	width: 100px;
	height: 100px;
	background-color: green;
}
.div_shadow1{
	width:100px;
	height:100px;
	background-color: green;
	box-shadow: 4px 2px 6px red;
}

.div_shadow2{
	width: 100px;
	height:100px;
	background-color:grey;
	box-shadow:5px 5px 10px red inset ;
}
.div_shadow3{
	width: 100px;
	height:100px;
	background-color:grey;
	box-shadow:0px 0px 10px red inset ;
}
.div_shadow{
	width: 100px;
	height:100px;
	background-color:grey;
	box-shadow:0px 0px 10px red inset,4px 2px 6px blue;
}

运行效果图;