border和box-shadow
Posted enternallove
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了border和box-shadow相关的知识，希望对你有一定的参考价值。
1.写在前面
border和box-shadow在css中是非常重要的属性，掌握好border，可以增加用户交互性。
2.border-style
用于设置边框样式：
1 <style type="text/css"> 2 p.dotted{border-style: dotted;} 3 p.dashed{border-style: dashed;} 4 p.solid{border-style: solid;} 5 p.double{border-style: double;} 6 p.groove{border-style: groove;} 7 p.ridge{border-style: ridge;} 8 p.inset{border-style: inset;} 9 p.outset{border-style: outset;} 10 </style> 11 12 13 </head> 14 <p class="dotted">这是点线框</p> 15 <p class="dashed">这是虚线框</p> 16 <p class="solid">这是实线框</p> 17 <p class="double">这是双边界线框</p> 18 <p class="groove">这是3D沟槽线框</p> 19 <p class="ridge">这是3D脊线框</p> 20 <p class="inset">这是3D嵌入线框</p> 21 <p class="outset">这是3D突出线框</p> 22 23 </body>
单独给每个边设置边框：
1 <style> 2 p 3 { 4 border-top-style:dotted; 5 border-right-style:dashed; 6 border-bottom-style:solid; 7 border-left-style:double; 8 } 9 </style> 10 </head> 11 12 <body> 13 <p>4种不同的边框</p> 14 </body>
边框的简写：
1 <style> 2 /*分别是宽度，样式，颜色*/ 3 p 4 { 5 border: 4px dashed red; 6 } 7 </style> 8 </head> 9 10 <body> 11 <p>边框的简写属性</p> 12 </body>
3.box-shadow
属性：
box-shadow:h-shadow v-shadow blur spread color inset;（水平阴影（必须） 垂直阴影（必须） 模糊距离 阴影尺寸 颜色 内置还是外置阴影）
1 <style> 2 div{ 3 background-color: grey; 4 box-shadow: 5px 5px 20px 5px black; 5 } 6 </style> 7 </head> 8 9 <body> 10 <div>这是一个阴影实例</div> 11 </body>
以上是关于border和box-shadow的主要内容，如果未能解决你的问题，请参考以下文章
传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转