前言:原始代码,未进行任何边框操作。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<style>
div{
background-color: blue;
height: 400px;
width: 400px;
border: 20px solid black;
}
</style>
</head>
<body>
<div>
</div>
</body>
<html>
运行结果:
>1 圆角边框属性:border-radius: 1-4 length|% / 1-4 length|%;
a单独分开定义每个角:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<style>
div{
background-color: blue;
height: 400px;
width: 400px;
border: 20px solid black;
/*圆角边框样式设置*/
/*左上角*/
border-top-left-radius: 800px;
/*右上角*/
border-top-right-radius: 20px;
/*左下角*/
border-bottom-left-radius: 20px;
/*右下角*/
border-bottom-right-radius: 800px;
}
</style>
</head>
<body>
<div>
</div>
</body>
<html>
运行结果:
综合一起书写的语法:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
下面的代码一个一个的用,别直接拿去用,不会显示圆角。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<style>
div{
background-color: blue;
height: 400px;
width: 400px;
border: 20px solid black;
/*圆角边框样式设置*/
/*1. 四个值*/
border-radius: 150px 50px 30px 5px;
/*2. 三个值*/
border-radius: 150px 50px 30px;
/*3. 两个值*/
border-radius: 25px 50px;
/*3. 一个值*/
border-radius: 50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
<html>
百分号%,用来修饰每个角的圆滑程度:
a、没有进行修饰
b、进行修饰
两者很好区别,都要好好掌握,你能造出意想不到的效果。
>2 边框盒阴影属性:box-shadow: h-shadow v-shadow blur spread color inset;
【补充说明spread: 取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。主要进行阴影大小比例缩放等比例缩放】
设置代码,添加阴影效果后:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<style>
div{
background-color: blue;
height: 400px;
width: 400px;
border: 20px solid black;
/*box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 100px 100px 5px red;/*只设置了水平、垂直偏移,模糊程度blur以及颜色*/
}
</style>
</head>
<body>
<div>
</div>
</body>
<html>
原始效果
在原有的设置中加入缩放 spread,如果设置值超过某个范围,将不再有偏移量。
box-shadow: 100px 100px 5px 100px red;/*只设置了水平、垂直偏移,模糊程度blur、缩放spread以及颜色*/
box-shadow: 100px 100px 5px -20px red;/*只设置了水平、垂直偏移,模糊程度blur以及颜色*/
加上inset值,他决定内阴影设置。
box-shadow: 100px 100px 5px red inset;/*只设置了水平、垂直偏移,颜色以及阴影位置inset*/
一直在路上,自律,坚持