返回不知道写什么欸...登陆

不知道写什么欸

美美哒2019-06-22 18:03:48180

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网