1、边框设置。点击打开css规则定义对话框,选择左侧的边框,打开边框属性设置。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/05e24be983aee8d7e8651e5c6b781431deb666e7.jpg)
2、选择样式,style茧盯璜阝就是边框的样式,这里面有很多种,就是边框的线条样式,有点线、虚线、实线、双重线等等,可以各种都尝试一下。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/586bfdefe07814316af9cfdfdc6699cf035362e7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/def72c6c576699cfbb1cd2d0a885e036e3915ee7.jpg)
3、设置粗细,width就是设置边丸泸尺鸢框线条的粗细,有自带的样式,也可以直接输入数值,color就是边框的颜色,可以根据需要设置。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/031231632385e0365fdeba5bb8e039723c035ae7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/e3d059e833e03972fc4c4659b5863048604356e7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/3c42a5ea3e863048a40c2a67c33104ebf7a752e7.jpg)
4、设置方框。点击打开css规则定义对话框,选择左侧的方框,打开方框属性设置。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/d695563104ebf6a795407f98ffee1c324a184fe7.jpg)
5、设置方框的大小。方框可以直接设置方框的大小,直接输入宽和高。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c328557ac9f07f1d8a727334be7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/4a594f2c8cf1d8a7f47cb53746e34b2c57ee47e7.jpg)
6、设置填充。填充就是方框离里面内容的间距。可以设置5px来看看效果。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/27725684cde34b2c80a186cc0d0e7c75e4f443e7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/4a6d48ee7b7f860ea53a184777f5ee0d3bcebee7.jpg)
7、设置边界,边界就是方框离上下左右内容的距离,可以全部一样,也可以分开放置,设置20px来看看效果。
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/874f6275e5f4fcf53242c77d21d7726b0de2bde7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/3b8fb4d7726b0ce284a8c9bcef781423bfb9b6e7.jpg)
![Dreamweaver:[57]网页css规则之方框与边框](https://exp-picture.cdn.bcebos.com/354e7a781423beb99071dc7130d6e1d06ce8b3e7.jpg)