css边框样式

原创 2019-02-13 11:49:11 275
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>盒模型</title>

<style>

*{padding:0;margin: 0;}

.box{

height: 100px;width: 100px;border: 1px dotted #ff6500;margin: 20px;

box-shadow: 0px 10px 27px #ccc inset;;

}

button{

border: 1px solid red;border-radius: 50%;height: 20px;line-height: 20px;

box-shadow: 3px 2px 5px #ff6500;

}

.shadow{

height: 50px;width: 50px;box-shadow: 5px 5px 7px #ccc ;

border: 1px solid ;margin: 25px;

}

</style>

</head>

<body>

<div class="box">

<div class="shadow"></div>

</div>

<button>登录</button>

</body>

</html>


批改老师:天蓬老师批改时间:2019-02-13 12:21:55
老师总结:边框样式设置重点在于简化规则, 边框与内外边距不同, 他是有样式的, 而margin/ padding只能设置宽度, 因为他们是透明不可见的, 所以,边框除了宽度,还可以设置样式, 颜色等

发布手记

热门词条