css边框属性

最新推荐文章于 2024-04-30 10:10:01 发布
最新推荐文章于 2024-04-30 10:10:01 发布
阅读量7.1k 收藏 43
点赞数 2
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43932097/article/details/115250493
版权

一：css边框属性

1.上边框：

border-top-style:样式
border-top-width:宽度
border-top-color:颜色
border-top:宽度，样式，颜色

2.下边框:

border-bottom-style:样式
border-bottom-width:宽度
border-bottom-color:颜色
border-bottom:宽度，样式，颜色

3.左边框:

border-left-style：样式
border-left-width:宽度
border-left-color:颜色
border-left:宽度，样式，颜色

4.右边框:

border-right-style:样式
border-right-width:宽度
border-right-color:颜色
Border-right：样式，宽度，颜色

二:(1)设置边框样式(border-style)常用属性值如下

·none:没有边框,即忽略所有边框的宽度(默认值)
·solid:边框为单实线
·dashed:边框为虚线
·dotted:边框为点线
·double:边框为双实线
·border-top-style:上边框样式
·border-right-style:右边框样式
·border-bottom-style:下边框样式
·border-left-style:左边框样式
·border-style:上边框样式 右边框样式 下边框样式 左边框
·border-style:上边框样式 左右边样式 下边框样式
·border-style:上下边框样式 左右边框样式
·border-style:上下边框样式

(2)设置边框宽度(border-width)

·border-top-width:上边框宽度
·border-right-width:右边框宽度
·border-bottom-width：下边框宽度
·border-left-width:左边宽宽度
·border-width:上边框宽度[右边框宽度,下边框宽度,左边宽宽度]

(3)设置边框颜色(border-color)

·border-top-color:上边框颜色
·border-right-color:右边框颜色
·border-bottom-color:下边框颜色
·border-left-color:左边宽颜色
·border-color:上边框颜色[右边框颜色 下边框颜色 左边框]

(4)综合设置边框

border:宽度 样式 颜色；
P{border-top:2px solid #ccc;}//定义上边框，各个值顺序任意
例如将二级标题的边框设置为双实线,红色,3像素宽,代码如下： h2{border:3px double red;}
常用的复合属性有font-字体,border-边框,margin-外边距和background-背景等。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css边框样式1</title>

    <style type="text/css">
        #OneBox{
            width: 800px;
            height: 800px;
            background: red;
            opacity: 0.5;

            border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
            /*
                边框的样式：solid：实线  dashed：虚线  dotted：点线  double：双线
            */

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -400px 0 0 -400px;
        }

        #twoBox{
            width: 600px;
            height: 600px;
            background: yellow;  

            border: 8px dashed green; /* 虚线 */

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -300px 0 0 -300px;
        }

        #threeBox{
            width: 400px;
            height: 400px;
            background: blue;  

            border: 12px dotted black; /* 点线 */

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -200px 0 0 -200px;
        }

        #fourBox{
            width: 200px;
            height: 200px;
            background: green;  

            border: 16px double black; /*双线*/

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -100px 0 0 -120px;
        }
    </style>
</head>
<body>

    <div id="OneBox">
        <div id="twoBox">
            <div id="threeBox">
                <div id="fourBox">

                </div>

            </div>

        </div>

    </div>
    
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css边框样式2</title>

    <style type="text/css">
        *{
            padding: 0px; margin: 0px;
        }
        #OneBox{
            width: 800px;
            height: 800px;
            background: red;
            opacity: 0.5;

            border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
            /*
                边框的样式：solid：实线  dashed：虚线  dotted：点线  double：双线
            */

            /*
                单独写法
                    单独设置某一边框的某一属性 宽度 边框样式 颜色

            */

            border-left-width: 40px;
            border-left-style: dashed;
            border-left-color: green;

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -400px 0 0 -400px;
        }

        #twoBox{
            width: 600px;
            height: 600px;
            background: yellow;  

            border: 8px dashed green; /* 虚线 */

            /*
                复合写法1 设置某一条边框的全部属性
                    设置右边框为50px 点状边框 绿色
            */
            border-top: 50px dotted green;

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -300px 0 0 -300px;
        }

        #threeBox{
            width: 400px;
            height: 400px;
            background: blue;  

            border: 12px dotted black; /* 点线 */

            /*
                复合写法2——设置全部边框的某一属性
            */
            border-width: 10px 16px; /* 上下 左右 */
            border-style: solid double dashed; /* 上 左右 下 */
            border-color: white red green black; /* 上 右 下 左 */

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -200px 0 0 -200px;
        }

        #fourBox{
            width: 200px;
            height: 200px;
            background: green;  

            border: 16px double black; /*双线*/

            /*
                复合写法3——设置全部边框为同样的属性
            */
            border: 10px solid purple;

            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -100px 0 0 -120px;
        }
    </style>
</head>
<body>

    <div id="OneBox">
        <div id="twoBox">
            <div id="threeBox">
                <div id="fourBox">

                </div>

            </div>

        </div>

    </div>
    
</body>
</html>
BiKABi
关注
  • 2
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS的方框属性（border，padding，margin）
qq_34416191的博客
06-12 2067
方框属性 /*边框样式使用border属性，任何元素都具有四个边框，每个边框都可以单独定义粗细，颜色和样式。*/ .tableborder{ border-bottom-color:red;/*边框颜色*/ border-bottom-style:double;/*边框样式*/
CSS边框属性
三月nebula
10-30 1544
一、边框的属性  (一)、边框   1、简写方式     通过一个属性来控制四个方向的边框效果     属性： border：width style color; width：宽度; 可以改变边框的粗细，以px为单位。 style：样式; 可以定义边框样式。 取值：solid：实线 dotted：虚线 dashed：虚线 color：颜色; 可以...
你不知道的CSS 边框：探索边界的无限可能
最新发布
艾恩小灰灰的博客
04-30 376
CSS边框远不止是线条那么简单，它们是网页设计中表达创意和细节的重要工具。通过上述技巧和代码示例，你可以看到，边框的使用范围广泛，从基本样式到高级效果，都充满了无限可能。不断探索和实践这些技巧，将使你的网页设计更加生动、独特，提升用户体验。
CSS的边框属性
Raccon_的博客
11-22 670
CSS 边框属性 border-width 设置边框宽度 border-color 边框颜色 border-style:solid(实现)/dashed(虚线)/double(双线)/dotted(点状线) 边框线型 border 简写(任意排) 注:宽高为0时边框为正方形 CSS3 border-radius:length; 设置圆角边框，参数用数值或百分比。 正方形要设置成圆时，需把数值修改为高度或宽度的一般，或直接写成50%； 矩形时，设置为高度的一半就可以做两边为圆形。 为简写属性，4个值
边框属性
To be a better man！
02-27 429
什么是边框？边框就是环绕在标签宽度和高度周围的线条。 只要是个标签就能给他设置一个边框。 ---------------------------------------分割线------------------------------------------ 边框属性的格式： ①连写（同时设置四条边的边框）： border:边框的宽度 边框的样式 边框的颜色; 例如：
css边框属性.pdf
02-27
CSS边框属性是网页设计中的关键部分，它允许开发者精确控制元素的外观，包括边框的样式、颜色和宽度。边框不仅仅局限于表格，而是可以应用于任何HTML元素，使得网页布局更加灵活且富有表现力。 首先，边框样式...
css边框属性 (2).pdf
02-27
总结来说，CSS的边框属性提供了一套强大的工具，使得网页设计师可以精确地控制元素的外观，从而实现各种创意设计。无论是简单的实线边框，还是复杂的3D效果，甚至是自定义的虚线和点线，都可以通过这些属性轻松实现...
CSS3动画属性边框属性等
11-22
CSS 边框属性（Border 和 Outline） CSS 背景属性（Background） Color 属性 Box 属性 CSS 尺寸属性（Dimension） 内容生成（Generated Content） 可伸缩框属性（Flexible Box） Grid 属性 Hyperlink 属性 CSS 字体...
CSS 边框
01-19
CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框   红色底部边框   圆角边框   左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的...
CSS border虚线边框属性教程
09-27
主要介绍了CSS border虚线边框属性教程，教大家如何使用css制作网页中的虚线，巩固CSS border属性使用方法，感兴趣的小伙伴们可以参考一下
border属性妙用
風缘的博客
12-27 1694
1.实现左右两栏等高布局经常建有这样的需求要求左侧菜单栏和右边内容区等高，如后台管理系统的界面 以上效果html代码：<div class="menu"> <ul> <li>首页</li> <li>用户管理</li> <li>设置中心</li> <li>会员管理</li> <li>系统管理</li> <
CSS的border边框属性 边框样式 内外边框 圆角合集
摸鱼大王的博客
12-14 1万+
CSSborder属性允许指定元素边框的样式、宽度和颜色。 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性 可以设置一到四个值（上边框，右边框，下边框，左边框） border-top: 10px solid black; //上 border-right: 10px double red; //右 border-bottom: 10px dotted blueviolet; //下 border-left: 10px d...
CSS中的边框属性
chenyiboke的博客
10-31 1301
边框属性分类： Document 1.边框 2.边框倒角 3.边框阴影 4.轮廓 一.边框属性 1. 边框 1. 简写方式： 通过一个属性控制四个方向边框的效果。 属性： border:width style color; width:宽度，边框粗细，以px为单位 ...
css方框属性是干什么的,CSS方框属性
weixin_39783156的博客
08-03 404
上边界语法: margin-top: 允许值: | | auto初始值: 0适用于: 所有元素向下兼容: 否上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。例如，以下的规则将消除文件的上边界。BODY { margin-top: 0 }注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。右边界语法: margin-...
Web前端篇：css背景属性和边框属性
ITmiaomiao666的博客
06-13 5815
背景属性值 属性值 属性值 描述 background-color d单侧颜色法，RGB，十六进制 s设置元素的背景颜色 background-image url(“wy.png”) 给一个元素设置一个或多个背景图像 background-position top,left,center,百分比，px 为每一个背景图片设置初始位置 background-reprea...
css对边框的属性控制和链接的伪类选择器
html基础教程
02-28 2901
边框(border): css控制的边框属性包括border-width, border-color, border-style. Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个“will soon be dead” 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图: 如上图所示,对...
css3中边框的4种样式
热门推荐
xyjikl
07-08 2万+
border是CSS的一个属性，用它可以给能确定范围的HTML标签画边框，它可以定义边框线的类型、宽度和颜色，最终可以制作一些特殊效果 css3的边框有4种样式： 1.border-color（边框的颜色） 一般设置边框都有3个属性-宽度、线的样式、颜色，如果宽度设置了很多PX，那么就可以给边框设置很多颜色，让边框显示出渐变的效果，不过设置边框不同颜色时只能通过borde
css边框虚线
06-02
在 CSS 中，可以通过 `border-style` 属性来设置边框的样式，其中包括虚线边框。虚线边框可以通过设置 `border-style` 为 `dashed` 或 `dotted` 来实现。 具体来说，可以通过以下代码来设置一个虚线边框： ```css border: 1px dashed #999; ``` 其中，`1px` 表示边框的宽度，`dashed` 表示虚线样式，`#999` 表示边框的颜色。 如果要设置点状虚线边框，只需将 `dashed` 改为 `dotted` 即可： ```css border: 1px dotted #999; ``` 需要注意的是，有些浏览器对于虚线边框的表现可能会有所不同，特别是在边框角落处可能会出现缺口。为了避免这种情况，可以将 `border-radius` 属性设置为一个较大的值，以确保边框角落处的曲线较为平滑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值