摘要:3.3 Css盒模型border 边框border:1px 边框宽度 solid 边框样式 #ccc 边框颜色; 边框样式:实线solid,双线double 虚线dashed 点状虚线 dotted。设置单边边框样式border-top:1px solid red; 边框样式清除border:none;控制边框圆角:border-radius:10px圆角大小;边框阴影:box-shadow:10
3.3 Css盒模型border 边框
border:1px 边框宽度 solid 边框样式 #ccc 边框颜色; 边框样式:实线solid,双线double 虚线dashed 点状虚线 dotted。设置单边边框样式border-top:1px solid red; 边框样式清除border:none;
控制边框圆角:border-radius:10px圆角大小;边框阴影:box-shadow:10px(X轴偏移距离)10px(Y轴便宜距离)3px(阴影的宽度/模糊度)#ccc(阴影颜色);默认向外!!!inset是向内阴影
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>border</title> <style type="text/css"> body{margin: 0px; padding: 0px;box-shadow: 0px 0px 100px greenyellow;} #main{width: 500px;margin: auto;} .box{width: 0px;height: px;background-color: red;border-bottom: 100px solid blueviolet;border-left: 100px solid white;border-right: 100px solid white;margin:auto;} #a{width: 0px;height: 0px;background-color: red;border-bottom: 100px solid palegreen;border-left: 100px solid white;border-right: 100px solid white;margin:auto;} div[id='b']{width: 0px;height: 0px;background-color: red;border-bottom: 100px solid pink;border-left: 100px solid white;border-right: 100px solid white;margin:auto;} #c{width: 30px;height: 200px;background-color: gold;margin:auto;} </style> </head> <body> <div style="margin: auto; width: 20px; height: 20px;background: red; border: 1px solid red ;border-radius: 100%; "></div> <div id="main"> <div class="box"></div> <div id="a"></div> <div id="b"></div> <div id="abc"></div> <div id="c"></div> </div> </body> </html>
希望得到老师的点评!
批改老师:韦小宝批改时间:2018-12-25 09:38:15
老师总结:写的非常棒!总结的也很详细!课后一定要记得多练习才能牢牢掌握哦!