html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用

原标题：CSS应用篇 | border边框竟然可以这么用

在我们平时网页中，想必大家一定用过border，可以根据border给我们提供的各种属性实现盒子的边框效果，那么今天就给大家分享一下边框的应用。

常规姿势

在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style(none、solid、dotted、dashed等)、颜色：color。可以通过border统一设置边框样式，也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基本设置方法：

特殊姿势

我们都知道，标准盒子模型的大小会受content(width,height)、padding、border的影响，所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：

假使只有上边框有颜色，其他边框的颜色均为透明：

此时我们就会得到一个三角小图标，是不是感觉很神奇。

再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。

借助其他样式合并输出姿势

border边框还能与border-radius一起来做出我们希望效果。例如：

再做一个月亮给你呀：

再送你一朵小花花：

最后做一个火热的爱心送给你呀~~

责任编辑：

html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用相关推荐

css学习之border 边框
边框,也就是盒子模型的四周, 1.四边相同边框border简写 #divcss5{border:1px solid #00F} CSS读取有从上到下.从左到右读取原理,而先设置了整个边框样式,后再加上 ...
css中去掉input边框颜色,css怎么去掉input边框
li默认是块状元素,总是在新行上开始,占据一整行. 首页关于我们 < 2021-04-02 20:31:42 去掉input边框的具体操作步骤如下:1.在html页面中输入input的相关代码 ...
html怎么做一个心形边框,使用CSS获取心形边框？
我有这样的代码,用于创建一个彩色心脏(其中有一个蓝色的背景),并使用CSS消色心脏(白色与蓝色边框有色):使用CSS获取心形边框? #favourite_user { position: relati ...
css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
html渐变设置颜色长度,css渐变色注意的几点
1.角度和from to只能运行一个.并且可以相互代替.看api 语法: = linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [to ...
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
html 最小边框宽度,css如何让div边框不占宽度？
HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...
html 边框轮廓,CSS半圈（边框，仅轮廓）
小编典典您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度(和添加的边框)在框上四角. 然后在框的顶部/右侧/左侧添加边框以达到 ...
html 控制边框长度,如何控制CSS边框长度的示例代码分享
CSS边框长度控制 CSS边框长度控制.以前需要边框长度比容器小一些时,我用p嵌套.后来发现伪类在实现这个效果时很方便,只需要一个p就够了,另外调整padding和margin都不会很麻烦. bord ...

html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用

html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用相关推荐

最新文章

热门文章