手把手教你使用css给HTML字体添加边框效果（代码分享）(2)-木庄网络博客

2022-02-07 22:52:22 PHP中文网 JavaScript 百度已收录

1、设置div标签的class属性为mydiv

1	`<div` `class="mydiv">随意写文字</div>`

1、<style type="text/css"></style>标签，页面的css样式。

1	`<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》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者