css 边框

本文详细介绍了CSS中边框(border)的各种属性及其用法,包括四个方向的边框设置、边框样式、圆角效果实现方法及边框颜色调整等内容。同时,还讲解了如何设置相邻单元格之间的边框间距。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.border四个边框:

     border-left:  设置左边框

    border-right: 设置右边框

    border-top: 设置上边框

    border-bottom: 设置下边框

2.border边框样式:

      hidden: 隐藏边框,IE不支持

    dotted: 在MAC平台上IE4+与WINDOWS 和UNIX平台上IE5.5+为点线,否     则为实线

    dashed: 在MAC平台上IE4+与WINDOWS 和UNIX平台上IE5.5+为虚线,否     则为实线

    solid:  实线边框

    double: 双线边框,两条单线与其间隔额和等于指定的border-width值

    groove: 根据border-color的值画3D凹槽

    ridge:  根据border-color的值画菱形边框

    inset:  根据border-color的值画3D凹边

    outset: 根据border-color的值画3D凸边

    none :  无边框。与任何指定的border-width值无关

3.border 圆角设置:

     使用 border-radius 属性,可以给任何元素制作 "圆角"。在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。如果在四个角上一一指定,可以使用以下规则:

1)  四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

2) 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角。

3) 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角。

4) 一个值: 四个圆角值相

       border-top-left-radius: 设置左上角的弧度

      border-top-right-radius:设置右上角的弧度 

      border-bottom-right-radius:设置左下角的弧度

      border-bottom-left-radius:设置右下角的弧度

4.边框颜色的设置:

     border-right-color:设置右边框的颜色

     border-left-color: 设置左边框的颜色

5.设置相邻单元格的边框间的距离:

      border-spacing :2px 边框间的距离为2px

 

       

       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值