html如何自动调整边框大小,css边框怎样设置长度？

css边框怎样设置长度？下面本篇文章给大家介绍一下CSS边框长度的控制方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

CSS边框长度控制

以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。

border top

border left

border right

border bottom

.box-container {

position: relative;

width: 90%;

color: #777;

}

.border-top {

background: #b4bcbf;

padding: 15px;

}

.border-top:before {

content: '';

position: absolute;

left: 42%;

top: 0;

bottom: auto;

right: auto;

height: 7px;

width: 50%;

background-color: #8796a9;

}

.border-left {

background: #dfdad6;

padding: 15px;

}

.border-left:before {

content: '';

position: absolute;

left: 0;

top: 6%;

bottom: auto;

right: auto;

height: 52%;

width: 5px;

background-color: #a89d9e;

}

.border-right {

background: #eee9c4;

padding: 15px;

}

.border-right:after {

content: '';

position: absolute;

left: auto;

top: auto;

bottom: 5px;

right: 0;

height: 52%;

width: 5px;

background-color: #f39c81;

}

.border-bottom {

background: #bcdc9d;

padding: 15px;

}

.border-bottom:after {

content: '';

position: absolute;

left: 18px;

top: auto;

bottom: 0;

right: auto;

height: 6px;

width: 105px;

background-color: #32b66b;

}

效果如下图：

更多web前端相关知识，请查阅 HTML中文网！！

html如何自动调整边框大小,css边框怎样设置长度？相关推荐

html正方形边框颜色,css边框颜色样式设置 css border颜色
DIV CSS边框颜色样式设置改变 css border边框样式可设置边框宽度.边框样式(css边框虚线.css边框实线).颜色样式.而css边框颜色只有设置边框宽度,设置边框颜色才能实现. 一.快速 ...
php外边框样式,CSS边框样式
摘要: &CSS边框 .box{width: 150px;height: 150px;background: violet; border: 2px dashed #ccc;border-ra ...
html中边框与边框距离,css边框border与margin属性
CSS边框属性: border不能分别定义4个边框的宽度,颜色和样式,只能统一定义,不可以对四个边设置不同的值,和margin与padding是不同的(后两者可以分别定义四个边的值). border- ...
html修改li大小,css为li设置不同宽度
在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 .列表中的奇数或者偶数项显示不同的背景色 . . . 等等.我们可以通过 CSS 来实现这样的效果,CSS 给我们 ...
html合并边框线条,CSS边框合并
表格边框合并属性(border-collapse)用来定义表格中边框是独立显示还是合并显示.在边框合并属性中,使用的属性值有两个:分别为separate和collapse.其语法结构如下所示. bor ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
css有棱角的边线,CSS边框与边界
(上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值简化方案:border: 长度形态颜色例如 border:1px solid black; 16.2 CSS中边界的使用 padd ...
Html中的边框弧边,CSS边框属性一---border-radius
1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...
在css的框中打文字,css 边框上如何写入文字？
方法一: 1.首先,打开html编辑器,新建html文件,例如:index.html. 2.在index.html中的标签中,输入html代码:. 文字 3.浏览器运行index.html页面,此时 ...

html如何自动调整边框大小,css边框怎样设置长度？

html如何自动调整边框大小,css边框怎样设置长度？相关推荐

最新文章

热门文章