css 边框效果参数
827 Views
五月 29th, 2008 by peterzsk
css design web WordPress 制作 技巧 教程今天来看看利用 css 制作边框效果的参数：
1 . css 代码：
- p {padding: 15px; border: 1px solid black; }
- h5{padding: 0px; border: 1px solid red;}
- <p>This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.</p>
- <h5>This header has no padding, which places the text right against the border!</h5>
显示效果：
2 . css 代码：
- p {padding: 2%; border: 1px solid black; }
- h5{padding: 0px; border: 1px solid red;}
网页内容：
- <p>This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.</p>
- <h5>This header has no padding. It is only spaced away from the paragraph because the paragraph has a padding of 5 pixels!</h5>
显示效果：
3 . css 代码：
- p { padding-left: 5px; border: 1px solid black; }
- h5{
- padding-top: 0px;
- padding-right: 2px;
- padding-bottom: 13px;
- padding-left: 21px;
- border: 1px solid red;
- }
网页内容：
- <p>This paragraph had one padding specified(left), using directional declaration.</p>
- <h5>This header had each padding specified separately, using directional declaration.</h5>
显示效果：
4 . css 代码：
- p {
- padding: 5px 15px;
- border: 1px solid black;
- }
- h5{
- padding: 0px 5px 10px 3px;
- border: 1px solid red;
- }
网页内容：
- <p>This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.</p>
- <h5>This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.</h5>
显示效果：
作者：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2008/05/css-padding/
采用CC创作共用协议,转载需保留以上信息并<署名、非商业和保持一致>。
如果您喜欢我的文章，可以订阅我的 
谢谢。
谢谢。
1 Response to “css 边框效果参数”
[…] css 边框效果参数 (0) […]