手把手教你使用css给HTML字体添加边框效果(代码分享)
导读:收集整理的这篇文章主要介绍了手把手教你使用css给HTML字体添加边框效果(代码分享),觉得挺不错的,现在分享给大家,也给大家做个参考。之前的文章《htML网页中如何实现居中效果(代码分享)》中,给大家介绍了如何让网页整体居中。下面本篇文章...
收集整理的这篇文章主要介绍了手把手教你使用css给HTML字体添加边框效果(代码分享),觉得挺不错的,现在分享给大家,也给大家做个参考。之前的文章《htML网页中如何实现居中效果(代码分享)》中,给大家介绍了如何让网页整体居中。下面本篇文章给大家介绍怎样使用css给HTML元素字体添加边框效果,我们一起看看怎么做。
html元素添加边框用border属性来实现。
border 简写属性在一个声明设置所有的边框属性。
border属性的三要素
border-width
默认是 1pxborder-style
边框样式border-color
默认是黑色
border-style
设置边框的样式可选
代码示例
style> p.none { border-style:none; } p.dotted { border-style:dotted; } p.dashed { border-style:dashed; } p.solid { border-style:solid; } p.double { border-style:double; } p.groove { border-style:groove; } p.ridge { border-style:ridge; } p.inset { border-style:inset; } p.outset { border-style:outset; } p.hidden { border-style:hidden; } /style>
代码效果
方法步骤
1、设置div标签的class属性为mydiv
div class="mydiv"> 随意写文字/div>
1、style tyPE="text/css">
/style>
标签,页面的css样式。
style type="text/css"> .../style>
2、mydiv的div进行样式设置,使用width和height属性设置div的宽度为85px和高度为20px。
.mydiv{ width: 85px; height: 20px; }
3、四个边框都设置成为1px实现灰色边框的方法。
1、border-left
属性设置div的左边框;
2、border-right
属性设置div的右边框;
3、border-top
属性设置div的上边框;
4、border-bottom
属性设置div的下边框。
border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc
代码效果
推荐学习:CSS视频教程
以上就是手把手教你使用css给HTML字体添加边框效果(代码分享)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 手把手教你使用css给HTML字体添加边框效果(代码分享)
本文地址: https://pptw.com/jishu/589564.html