不知道写什么欸

原创 2019-06-22 18:03:48 296
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS边框</title><style type="text/css">.box{width: 500px;height:500px;border-top: 2px

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS边框</title>

<style type="text/css">

.box{

width: 500px;

height:500px;

border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ blue;

border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ green;

border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ yellow;

border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ red;


border-radius/*圆角*/: 40%;

display: flex;

}

.box1{

width: 400px;

height: 400px;

border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ red;

border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ blue;

border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ green;

border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ yellow;


display: flex;

margin: auto auto;

border-radius: 35%;

}

.box2{

width: 300px;

height: 300px;

border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ yellow;

border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ red;

border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ blue;

border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ green;


display: flex;

margin: auto auto;

border-radius: 30%;

}

.box3{

width: 200px;

height: 200px;

border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ green;

border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ yellow;

border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/red;

border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ blue;


display: flex;

margin: auto auto;

border-radius: 25%;

}

.box4{

width: 100px;

height: 100px;

border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ blue;

border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ green;

border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ yellow;

border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)*/ red;


display: flex;

margin: auto auto;

border-radius: 20%;

}

.box5{

height: 20px;

/*border-top: 2px solid/*doyble(双线);dashed(虚线);dotted(点线) blue;

       border-left: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)green;

       border-bottom: 2px solid/*doyble(双线);dashed(虚线);dotted(点线)yellow;

       border-right: 2px solid/*doyble(双线);dashed(虚线);dotted(点线) red; */

box-shadow:0px/*(X方向位置)*/ 2px/*(Y方向位置)*/ 5px/*(阴影宽度)*/ pink/*(颜色)*/;

margin: auto auto;

}

button{

border: none;

margin: auto auto;

}

</style>

</head>

<body>

<div class="box">

<div class="box1">

<div class="box2">

<div class="box3">

<div class="box4">

<button class="box5">登陆</button>

</div>

</div>

</div>

</div>

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-06-24 09:32:29
老师总结:边框属盒模型中的一个重要的样式, 也是一个复合属性, 对于设置元素外观很有用

发布手记

热门词条