html边框缩短,有什么办法css border缩短

如果我给div设置了border边框，border根据高度占满了，我想在两边留一点空白，怎么样缩短border。

你现在这个div不要设border，但是在div里嵌套多一个小一点的div(当然，文字内容就都写在这个小div里面了)，在小的div上设置border就ok了

应该是里面再加一个div,用这个div来显示边框

为什么不用伪元素

border 属性本身是包裹在content外的’边框’，是不具备修改长度能力的。

想要实现预期的短边框效果，我提供两种思路。

1.把这个表框包裹的content的高度减小，然后用margin保留占据空间；

2.利用其他空元素(或新建一个标签或利用伪元素)，定义这个元素的高度为你的目标高度，再设置表框或者干脆用width:1px;background-color:gray;来达到预期效果。

一个div

方法一：伪元素:before/:after

.demo {

width: 100px;

height: 100px;

line-height: 100px;

text-align: center;

background-color: #fff;

position: relative;

}

.demo:before{

content: '';

width: 1px;

height: 60%;

background-color: #ccc;

position: absolute;

left: 0;

top: 20%;

}

方法二：设置border到文字本身

.demo {

width: 100px;

background-color: #fff;

text-align: center;

padding: 20px 0;

}

.demo span {

display: block;

height: 60px;

line-height: 60px;

border-left: 1px solid #ccc;

}

</style>

像这种分割线，使用before,after做更好些吧，不增加dom元素，又能自定义样式，堪称完美呀

用padding也行啊

.left{

position: relative;

}

.left:after {

content: '';

height: 36px;

border-left: 1px solid #000;

position: absolute;

top: 2px;

right: 0px;

}

使用一个伪类会方便点=.=

跟上面的有些人说的差不多，你就试试伪元素还方便些，:after :before

html边框缩短,有什么办法css border缩短相关推荐

html正方形边框颜色,css边框颜色样式设置 css border颜色
DIV CSS边框颜色样式设置改变 css border边框样式可设置边框宽度.边框样式(css边框虚线.css边框实线).颜色样式.而css边框颜色只有设置边框宽度,设置边框颜色才能实现. 一.快速 ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
css border画图
css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下. css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因此一直以为 ...
CSS Border属性solid(实线)使用介绍
Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下制作过 ...
html如何隐藏盒子的边框线,用DIV和CSS做一个实线边框的红色盒子
做一个案列给大家参考,我们使用DW软件来做一个红色实线边框的盒子,我们给这个盒子命名为DIV,下面就是代码案列为了观察效果对盒子设置一个css高.css宽样式,并赋予红色css边框样式.同时为了兼容 ...
html 边框重叠问题,详解css边距重叠的几种解决方案
今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而这其实不是我们想要的结果,我们只想对子元 ...
html css文本框边框样式,HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式宽度和颜色 CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
html边框上的小箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程
今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解决办法:先用noWrap令文字不换行,再用style=table-layout:fixed ...

html边框缩短,有什么办法css border缩短

html边框缩短,有什么办法css border缩短相关推荐

最新文章

热门文章