html中border怎么设置
大家好，本节课讲解网页前段编程之边框样式，这一个是视力代码， border 是设置这个边框属性， border gun style 设置这个边框的样式， 波罗杠开了设置边框的颜色，波罗杠外设置这个边框的大小。看一下视力代码， 看这个视力代码，这个是连起来写的视力代码，这是底边边框的样式代码。看一下在浏览器中的效果， 这一个就是在浏览器中的使用效果。好，本节课到此结束，感谢大家的收看。
粉丝143获赞821
相关视频
12:28查看AI文稿AI文稿好，来接着我们刚刚才的这个代码，当我们书写完 table t r 以及 td 以后啊，我们可以在页面上有看到这样的一个效果， 有看到这样的一个效果，但这个效果的话呢，不是的很明显啊，就是说我们不能不能够很直观的去知道，哎，这个 table 到底现在呈现的是一个什么样子？ 因为我们现在属性不够，而且内容也很少，对吧？所以我们现在要慢慢的去丰富，那现在的话，我们只需要先把这几个标签的意思先搞清楚。首先第一个 table 表示的是一组表格的 目录啊，也就是说我的一个页面上有可能是有几个独立表格来构成的，那么一对 table 就表示为，我现在的这里为 包含起来就是一组推宝，一组表格好的，那么 t r 表示为一行，那现在我的这个代码的话，所呈现出的意思就是我有一个推宝，并且这个推宝中有一行，这一行中呢包含呢有两个列啊，有两个列， 好，那如果说我们现在把这一段代码复制一下，直接 到下面来，再来看页面上的一个展现效果， 这里就成了两行两列好，但是现在看起来比较吃力，对吧？我们只是说能够把这个表格做一个显示了，但是他的显示 看起来很吃力，那我们现在为了让他的一个显示的话变得更为的友好，所以现在我们要看到的就是另外的两个属性，一个 个叫做外死，一个叫做黑色，他们分别用于设置表格的宽度 以及设置表格的高度啊，表格的宽度以及高度好，什么意思？比如说我们现在在这里来设置一下， y 四等于五百， hit h i j h t 等于三百， 好，保存以后再来刷新页面。哎，你就会发现有这样的一个内容了，那么这个内容所表示的意思就是什么？ 我整体的表格宽度有五百，高度有三百，现在在没有内容一定要注意哈，是我们没有填写任何内容的情况下， 当前表格就会将你的单元格平均分布啊，就是你的宽度和高度都会平均分布，所以形成的就是两行两列，这样看起来就会很明显了，对吧？好，但是如果我们加入了内容以后 来，当我们现在四个单元格当中都加入了内容以后，刷新不会有任何影响。但是如果你只是在某一个单元格当中添加的内容，其他的单元格没有添加内容，那么很有可能就会导致这样的一个情况 啊。这个的话呢，可以暂时先不用管他哈，我们后面可以有这个什么方式可以去解决啊？主要的原因就是因为你当前单元格中有了内容文本自身呢也会有一定的间距，所以说他现在把你当前的这个格子啊，所在的格子给他撑大了 啊，就是现在的话，因为你还没有就整个开发没有完成嘛，对吧？所以这样的一个问题的话呢，你可以放在就你整体的这个什么 呃，开发完成以后啊，再来做，而且后期我们的 css 也可以去帮助我们解决啊，所以这个问题的话呢，不严重哈，但是我们要知道有这样的一个问题存在。好，然后我们现在把内容给他填写上去，一二三四，每个单元格当中我们都存放的一个内容。 好，现在的话，因为大家都有内容，所以他的内容还是会平均分布，那这里得到的呢？就是一个啊，正常的一个什么有宽度，有高度，然后你去做了显示的这样的一个 啊， table 的一个样式哈。好，那接着又来看，我们除了可以去设置整个表格宽高 显示边框啊，我们还可以去显设置他的位置，用到一个 ny 属性等于 ceter 啊，这个跟我们之前讲过的 h 标记和 p 标记当中都有的 ny 这个属性哈，是一样的。那么现在他的这个属性设置是在 table 身上， 他就会将整个这个单元格在你所显示的区域之中啊，所显示区域居中。那么对应来看哈， tr 和 td 当中都有 n 奈这个属性啊，那他分别表示什么意思呢？ 如果说这个 nice 属性出现在我们的这个，我们先把上面这些写一下， 那如果是出现在 table 当中，它用于的是设置整个表格在水平方向上 的对齐方式而行当中的 ny， 当他设置完以后，我们去看一下效果，比如我在这里的这个 tr 身上写一个 ny 等于 senter， 那他现在得到的一个效果刷新后你会发现他是文本内容之中，并且是当前设置的这个所在。 tr 啊，这个 dr 所在行 整行内容的文本都会做剧中。好，那我们可以猜想一下，如果说 ny 这个属性是出现在列 td 当中的话，又会得到什么效果？我们找到第二行啊，两个列，比如说我们在第一个列当中同样的去书写 ni， 让它的值为 cinter 好刷新一下页面，文本内容同样也做了剧中，但是现在就会更具体了，因为他可以设置到的是我们现在看到的代码所在位置。 第二行的第一列当中的文本内容有一个 n 奈维森特哈，所以 n 奈属性出现在 table 当中，出现在行当中和列当中他们所指的意义不一样。 黑布里面我们已经知道了，那出现在行当中的话，是设置当前整行 整行内容 在水平位置上的对齐方式，而列当中的话呢，是设置当前 指定单元格 的内容在水平位置上的对齐方式。 好，这个很明确。那么既然在这里有了恩爱这个属性的话，那我们就要知道了啊，有，举一反三。这样的话，我们应该要知道一个概念就是什么呢？只要你是书写在 table 当中的属性，他所针对的是你整个表格的样式设置， 而写在 tr 中的属性，它针对的是整行内容的这个样式设置。而 td 的话，就针对的是你当前的某一个单元格，就指定的这个单元格 他所应该要遵循的这个样式设置了啊，这个就很明确，我们举一反三。比如说我们还可以来看一下一个属性 b 七卡，那 好， bg 卡那可以出现在 tabletr 以及 td 当中。同样的，我们在这里来写一个 bg 卡，那等于 red 好，刷新一下，整个表格的背景色都变成了红色，但是如果这个属性我们只把它写在了 tr 当中， 是不是就只会有当前的这一行了？同理，如果说我们只把这个属性卸在了某一个 td 当中， 是不是就只会有一个列了呃，一个单元格了，对吧？哎，这样的一个属性都是举一反三，大家可以呃自行都可以去学习的哈，这些东西我们就不不需要一个一个讲，而且像这样的属性的话，其实用的不是很多啊，就过一下就可以了。 bg 卡，那用于设置的是整个表格的背景颜色，而如果 bg 卡，那出现在 tr 当中，设置的是整行 的背景颜色，但如果它出现在我们的 td 当中，就设置的是指定单元 的背景颜色，那可以设置背景颜色。同理，我们就可以设置背景图片 background， 同理，他用于设置是整个表格的背景图片。 而下面这里的 benk ground 用于设置的是整行的背景图片，而下面的这里设置的就应该是我们 指定单元格的背景图片。好，就是这个意思。 好了，那接下来的话呢，我们可以设置啊，在水平位置上，我们已经可以设置整个 table 的布局方式了啊，对齐方式了， 那我们还可以设置内容水平位置，那能不能设置内容在垂直方向上的对齐方式呢？同样也是可以的。那在这里的话呢，有一个属性，他只能够出现在 tr 和 td 当中哈，这个属性叫做 vni 好，它的曲值呢分别就是 top， middle 以及 bottom 好，这里不用解释，大家都应该知道了哈。如果说写在 tr 当中就是对整行有效，写在 td 当中就只对单元格有效，那我们就直接看一下效果。如果我们写在 tr 当中，在这里我们给一个 vnney 好值为 bottom， 现在的结果我们写在书写代码是在第一行当中啊，设置了这个属性值，刷新一下 第一行中的文本，现在是在垂直位置上进行了曲底部的一个操作， 那同理的透普是不是就应该是居顶部对齐， mido 就是对居中啊，默认的话就是 mido 啊，居中对齐。所以这里的 v a nine 所表示的意思是设置 行中的内容在垂直位置上的对齐方式或者布局方式吧。而下面 td 当中呢，这个就应该是设置指定单元格中的内容在垂直位置上的布局方式。好的 好，那么这里的话呢，我们就看到了哈，最嗯比较通用的几个属性，就是说在 table 当中， tr 当中以及 td 当中啊，都会存在的这样的一些个属性，这就是一些大家都会有的属性，但虽然说他们都有这个属性，但他们呈现出来的一个结果啊，是不一样的啊。 好，那下节课的话呢，我们再来针对讲一下啊，在 td 当中和 t 二当中所特有的一些属性。
41课得在线
00:54查看AI文稿AI文稿你觉得这个 html 边框是不是不够漂亮？那么我们用 css 做边框，首先在 division 标签中添加 id 属性，这里写 css 代码， 边框粗细设置为一像素， salad 表示实现设置边框颜色，边框宽度设置为 250 像素。 我们还可以设置边框的背景颜色， 使用 border radios 属性实现边框圆角。效果 怎么样？现在可以了吧？
143艾伦
01:32查看AI文稿AI文稿上节课我们讲了元素的外编剧，这节课来讲他的内编剧以及使用方法。什么是内编剧？内编剧就是元素的边框与内容之间的空间，现在这个元素的边框与他的内容之间显然是没有空间的。来先给他上面设置一个内编剧 来看样式，胎顶套十 px 来看他的效果，上面的空间就出来了。再给他左边设置一个 拍定 f 的也设为是 ps， 上下左右都是这样设置的，就不多说了。来看四个方向的简写也是这样， 与他的外编句的方法是一样的。十二、十三、十十， 他表示的是上右下左两个的时候，表示上下左右。 内编剧。外编剧的使用是很简单的，但是因为内编剧、外编剧还有边框的出现， 导致在计算元素的宽高的时候，在不同的标准下计算的结果是不一样的，这就引出盒子模型的概念。我会在下节课讲，这节课就到这里。
100人人都会软件编程
02:30查看AI文稿AI文稿欢迎来到默然说话的课堂啊。那么这一讲呢，我们继续给大家介绍边框属性的边框宽度啊。那么边框宽度这个单词呢，就是波德维斯啊，维斯就是宽度啊， 那么说白了，这个宽度的属性值就是什么呢？就是一个数字带单位啊，就是比如说像素是吧？啊，你就带上像素的单位啊，这这一点呢，就给同学说一下。那么其中一个重点呢，是要给大家讲一下啊，你这设置边框宽度啊，或者说就有边框的粗细的时候啊，那有一个条件要求，就是你必须要有边框的样式 啊，否则的话你设宽度就没有任何意义啊，那就他他他就不会显示出来啊。那么所以这一点要注意。那当然边宽的宽度呢，应该是一个正数是吧啊，然后呢，他可以设成零啊，边宽可以是零 是不是啊，边框可以是零，就是没有边框啊，那么你把边框设成零的话，这个时候设波德斯带尔呢，你又看不到他的样式了是吧？啊，因为你边框肯定是要有一定的出息，那他的样式你才能看得到嘛啊， 所以就是这样一个概念哈。那么作为边框威斯来说呢，也跟那个威斯来说呢，也跟这个斯达尔是一样啊，他可以设四个指 对吧？啊，你设一个，那就表示四个边框都是一样的啊，比如说这里设了五像素啊，那四个边框都是五像素是吧？啊，你要设两个值呢，就是上下是五像素啊，左右是 呃，三项数是吧？啊，你要设成三个字的话呢，就是上边框是五项数，左右边框是三项数，下边框是四项数是吧，你要设成四个字，那就是上右下左， 记好顺序啊，第一个是散，第二个是右，第三个是下，最后一个是左啊，就是这样的一个概念哈。那么当然在我们用宽度的时候呢，很多的时候我们用到的都是一个指啊，因为一般是宽度肯定就有四个宽都一样啊。当然 也有只设这个的啊，那么当然他也有那个，我们前面给大家讲过的就是那个 呃，靠谱啊。啊 left 啊啊， rider bottom 啊，就四个方向的指，就是也是那个发位，发位词也是写在中间啊。这个都是 跟斯达尔样式是一样的啊。这里我就不再多讲了。好吧。啊，我是莫安说话啊。这个带领大家进入陌生的边城世界。这一讲呢，我们就到这里啊，欢迎大家呢关注我啊。呃，谢谢大家。
2默然说话
03:11查看AI文稿AI文稿呃，好的，这一期我们说上一个就是关于 v b 六点零的一个小知识点，首先的话呢，我们把，呃我们所遇到的一个问题啊，我们来演示一下。 首先的话呢，我们在这个窗窗体的一个工作过程中，对吧？我们可能会遇到这样一种情况，就是说我们如果对窗体不做设置的话，那么在我们的实际使用的过程之中，嗯，我们下面演示一下吧，这个 x 一二三， 然后呢我们输入一个叫做啊小李啊，小李子，然后呢 a 组啊销售，然后呢这个副组长， 然后工作号码，然后呢假说是这个一二三，我随便输吧啊？ qq 的话呢，都可以随便输啊，这个假如说十呃 十二号。好，那这个时候呢，我们点击这个，我们先看一下我们现在的这个数据，现在的话就是没有这个叫小李子的，对吧？我们来看一下，然后我们点击保存数据， 然后把这个给更新一下，这样的话就出现一个小李子，嗯，然后但是有一个问题是什么呢？就是说我们的这个窗口啊，他他这样的话，他如果是这样的话就不好看了，对吧？他就影响我们工作了，那我们能不能把他这个窗口给他给他固定下来呢？好，下面的话呢，我们来啊来看一下啊， 首先我们把这窗口我们给它固定下来，然后我们看一下这个 bother store。 呃，眼下的话是二，但是当我们选择一的时候，我们来看一下啊， 这个窗体的话，我们发现啊上面的还有一些内容啊，他是发生了一个改变了，对吧？那这个时候我们点击运行。好，我们来看一下，这个时候呢，无论是放到四个角落里面啊，还是放到他的这个， 还是放到他的边框上，那这个时候呢，我们对大小就不能调整了，当然呢上面的一个按钮的话，也就原来的三个变成了一个，对吧？那我们再来看一下另外的一个，看一下这个喃，我们看一下可不可以来进行一个操作啊？这个时候的话我们会发现啊。呃，这个时候我们会发现，对吧？就是说在他在他的整个的这样一个， 嗯，在他的整个的一个工作界面中啊，就是说我们这个，哎，我们直接给他取消，取消掉啊，也就是说我们啊就是说他上面没有任何东西的，那这个时候肯定还是要有一点，那我们再看下面的啊。 呃，假设我们看第三个啊，第三个我们看一下运行一下。好，那第三个的话也是不能够，呃，也是也是无法进行调整的，对吧？好，然后我们再来看一下 这个，呃，第五个啊，第五个的话我们来看一下啊，他这个呢也是不能调整的，单从使用的一个习惯上啊，这个第五个是可以调整的啊，单从使用习惯的话，单从这个使用的一个习惯上，我建议还是使用咱们的这个 signal 就行了。好， 然后呢，呃，下面的话我们把这个窗体呢，我们就给他保持这样一个状态就可以了，就是他在这个 bother style 属性里面， 嗯，在他的一个包装，呃， style 属性里面，第第一个和这个第四个我们都是可以限定他的一个大小的。这一期的话我们简单的说上这么一个小的一个知识点，我是中央老师，小鹏老师，咱们下期再见。
28小彭办公设计
01:01
00:46查看AI文稿AI文稿带你认识不一样的 border radius。 border radius 通常用来设置圆角，还可以把图片设置成圆形，但你敢相信你现在看到的这个不规则的变化的图形就是用 border radius 做的。我们一起来看代码 页面中只放了一个 div， 这个 div 应用了 fancy border 的样式，样式里面应用了一个动画，动画修改的就是 border radius 直，我们把动画拿掉，形状变成了正方形， 再把 border radius 复制上来，形状就变了。但是这样一大串百分比数值我反正是写不出来的。不用着急，有现成的工具帮你来生成。使用 fancy border radius 工具可以很方便的生成这个数值，再复制下来就可以直接使用了。怎么样，是不是很简单？赶快试试吧！
3957叨叨魏
02:02查看AI文稿AI文稿will it all be closer to show 萨瓦迪卡 this part 别说学过，只是听说。
5177令人脱发的代码
