利用css边框属性,实现不同展示效果!

原创 2019-01-18 15:00:35 337
摘要:老师讲的非常好,通俗易懂,本节掌握了:利用border-radius属性里面的4个值(solid,double,dashed,dotted)可展现不同的边框效果,利用border-shadow属性可实现外阴影与内阴影效果。border-shadow属性中包含4个值(第一个值代表x轴阴影位置,第二个值代表y轴阴影位置,第三个轴代表阴影宽度,第四个值代表阴影的颜色值)以下是我做的小案例效果:部分css

老师讲的非常好,通俗易懂,本节掌握了:利用border-radius属性里面的4个值(solid,double,dashed,dotted)可展现不同的边框效果,利用border-shadow属性可实现外阴影与内阴影效果。border-shadow属性中包含4个值(第一个值代表x轴阴影位置,第二个值代表y轴阴影位置,第三个轴代表阴影宽度,第四个值代表阴影的颜色值)

以下是我做的小案例效果:部分css属性为了div在本页中的展现效果特意加上去的,请老师忽略即可!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css边框效果</title>

<style>

.one{

width:  200px;

height: 200px;

border-top: 2px double blue;

border-right:2px dashed lightseagreen;

border-bottom:2px dotted lawngreen;

border-left: 2px solid red;

float: left;

margin-right: 10px;

text-align: center;

line-height: 200px;

}

.two{

width:  200px;

height: 200px;

float: left;

border: 1px solid #f60;

border-radius: 15px;

margin-right: 10px;

text-align: center;

line-height: 200px;

}

.three{

width:  200px;

height: 200px;

float: left;

border: 1px solid lightseagreen;

border-radius: 100px;

margin-right: 10px;

text-align: center;

line-height: 200px;

}

.four{

width: 200px;

height: 200px;

border: 1px solid #ccc;

float: left;

background: lightcoral;

box-shadow: 2px 2px 6px #ccc;

text-align: center;

line-height: 200px;

}

.nav{

width: 600px;

height: 35px;

border: 1px solid #11C2EE;

border-radius: 5px;

float: left;

margin-top: 15px;

box-shadow: 2px 2px 25px #ccc inset;

text-align: center;

line-height: 35px;

}

</style>

</head>

<body>

<div class="one">四个边框效果不同</div>

<div class="two">圆角效果</div>

<div class="three">圆形效果</div>

<div class="four">外阴影</div>

<div class="nav">内阴影</div>  

</body>

</html>


批改老师:天蓬老师批改时间:2019-01-18 15:02:01
老师总结:盒模型中, 只有边框和内容是可见的, 除了能设置宽度外, 还可以设置样式和颜色, 边框还有很多非常有意义 的属性, 例如设置圆角等

发布手记

热门词条