您的当前位置:首页关于CSS之border属性的详细介绍

关于CSS之border属性的详细介绍

2023-11-29 来源:华拓教育

border的属性

1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是3px的原因是只有当border是3px及以上时,border-style才有效

果),thick(5px)

2.border-style:有不同值,下面分析分别为不同值时的应用

a.solid:可以实现三角,梯形

<!DOCTYPE html><html><head> <title>用solid实现三角和梯形</title> <meta charset="utf-8"> <style type="text/css"> .triangle{ width: 0px; height: 0px; border-style:solid; border-width: 50px; border-color: red transparent transparent transparent; } .trapezia{ width: 40px; height: 40px; border-style: solid; border-width: 50px; border-color:transparent transparent green transparent ; margin-top: 10px; } </style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>

b.dashed:虚线,在chrome/Firefox浏览器中,虚线和实线的比例是3:1(稀),在IE浏览器中,比例是2:1(密)

c.dotted:点线,在chrome/Firefox浏览器中,是方点,在IE浏览器中,是圆点(可以利用圆点实现圆角效果)

d.double:双线,计算规则,双线宽度永远相等,中间间隔+-1,例如,3px=1(内)+1(中间间隔)+1(外),可以实现三道杠图形。

e.inset(内凹),outset(外凸),ridge(沟槽):风格过时,兼容性差,没有什么使用场景

3.border-color:在不指定color时,使用color作为边框色,可以利用这一特性,简化链接改变颜色时的css样式代码。例如:

<!DOCTYPE html><html><head> <title>鼠标移动时边框颜色的改变</title> <meta charset="utf-8"> <style type="text/css"> .a{ width: 30px; height: 30px; padding: 20px; margin:30px; color: red; border:1px solid; } .a:hover{ color: blue;/* border:1px solid;*/ } </style></head><body><p class="a">哈哈</p></body></html>

4.利用border可以实现背景图像的定位,因为背景图像在定位时是不计算border的

5.利用border实现等高布局,缺点是不支持百分比宽度

(4,5类似,都是利用border,使得与某侧距离固定)

小编还为您整理了以下内容,可能对您也有帮助:

css中border的属性

css:盒模型border属性

深入理解border属性

1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分,所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.

1 .1px
2 .thin:1px
3 .medium:3px,默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px

1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样

2 .solid:实线

3 .dashed:虚线 :颜色区和透明区的比例所占的不一样,chrome是2:1,IE,火狐是3:1

4 .dotted:圆点边框

5 .double:双线板框。线框的表现还和宽度有关系,宽度不同最后的表现也不一样

6 .其他:inset(内凹),out(外凹),沟槽(groove),ridge(山脊)

1 .border-color默认颜色是color色值,如果没有指定边框颜色,就会使用color的颜色,outline,,box-shadow,text-shadow也是这样

1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位,而不能相对右下角.一个宽度不固定的元素,我们需要在距离右边缘50像素的位置设置一个背景图片

2 .增加点击区域大小:通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;

3 .三角形绘制

1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box

1 .center:居中图片
2 .top.left

1 .上面构造出来的全等三角形,其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0,就可以只显示左边的,实现一个直角三角形

深入理解border属性

1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分,所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.

1 .1px
2 .thin:1px
3 .medium:3px,默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px

1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样

2 .solid:实线

3 .dashed:虚线 :颜色区和透明区的比例所占的不一样,chrome是2:1,IE,火狐是3:1

4 .dotted:圆点边框

5 .double:双线板框。线框的表现还和宽度有关系,宽度不同最后的表现也不一样

6 .其他:inset(内凹),out(外凹),沟槽(groove),ridge(山脊)

1 .border-color默认颜色是color色值,如果没有指定边框颜色,就会使用color的颜色,outline,,box-shadow,text-shadow也是这样

1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位,而不能相对右下角.一个宽度不固定的元素,我们需要在距离右边缘50像素的位置设置一个背景图片

2 .增加点击区域大小:通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;

3 .三角形绘制

1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box

1 .center:居中图片
2 .top.left

1 .上面构造出来的全等三角形,其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0,就可以只显示左边的,实现一个直角三角形

border是什么?

HTML语句中“border=1”是边框为1像素的意思。

border 是 CSS 的一个属性,用 border 可以给能确定范围的 HTML 标记(如 TD、DIV 等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。

一、border-width:thin medium thick 10px;

上边框是细边框,右边框是中等边框,下边框是粗边框,左边框是 10px 宽的边框。

二、border-width:thin medium thick;

上边框是 10px,右边框和左边框是中等边框,下边框是粗边框。

三、border-width:thin medium;

上边框和下边框是细边框,右边框和左边框是中等边框。

四、border-width:thin;

所有 4 个边框都是细边框。

扩展资料:

边框其他样式:

none定义无边框。

solid定义实线。

dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

double定义双线。双线的宽度等于 border-width 的值。

groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge定义 3D 垄状边框。其效果取决于 border-color 的值。

inset定义 3D inset 边框。其效果取决于 border-color 的值。

outset定义 3D outset 边框。其效果取决于 border-color 的值。

inherit规定应该从父元素继承边框样式。

参考资料:百度百科-border

CSS3中边框属性如何使用

今天将和大家分享css3中边框属性的用法,具有一定的参考价值,希望对大家有所帮助。

CSS3中的边框增加了许多新的功能,使我们的边框设计变得更加好看,接下来将在文中详细的为大家介绍几种边框的用法

css3边框

(1)边框阴影

box-shadow:h-shadow v-shadow blur spread color inset

h-shadow ,v-shadow:水平和垂直方向的阴影位置,可以写负值

blur :模糊距离(值越大越模糊)。

spread:阴影的尺寸

color :阴影的颜色

inset:将外部阴影 (outset) 改为内部阴影

前面两个值是必选的,后面四个值是可选的

div{

width:100px;

height: 100px;

background-color: pink;

box-shadow:10px 10px 10px gray;

}

(2)边框图片

border-image:src slice width outset repeat

src : 图片的路径。

slice:图片边框向内偏移。

width:图片边框的宽度。

outset:边框图像区域超出边框的量。

repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

注意浏览器兼容问题

div{

border:20px solid transparent;

width:100px;

height:50px;

line-height: 50px;

text-align: center;

padding:10px 20px;

border-image:url(images/12.png) 50 50 round;

-moz-border-image:url(images/12.png) 50 50 round; /* Firefox */

-webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */

-o-border-image:url(images/12.png) 50 50 round; /* Opera */

}

(3)边框圆角

border-radius

div{

width:150px;

height:30px;

border:2px solid #ccc;

border-radius:25px;

line-height: 30px;

text-align: center;

}

总结:

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。