HTML基础学习-17-border 边框相关属性学习

最新推荐文章于 2022-07-12 14:28:55 发布
最新推荐文章于 2022-07-12 14:28:55 发布
阅读量475 收藏
点赞数
文章标签： html border-css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011523180/article/details/73065447
版权

HTML基础学习-17-border 边框相关属性学习

<!DOCTYPE html>
<!--
    border-style 边框风格  可以 border-style-left  -right -top -bottom  定义某个方向的边框  
            none  默认属性
            solid 直线边框
            dashed 虚线边框
            dotted  点状边框
            double 双线边框

            依托border-color 属性的 边框属性设置

            groove 凸槽边框
            ridge 垄状边框
            inset inset边框
            outset outset边框



            inherit

border-width         thin   medium中等  px具体值  inherit  边框宽度属性值

    border-color     统一四个边框

边框颜色值  同样可以 border-left-color border-right-color  
                    border-top-color  border-bottom-color 定义四个方向上的边框


属性值的四种情况
一起写的情况 一个值到四个值写法
border-color  :(上下左右)
border-color : (上下,左右)
border-color:(上，左右，下)
border-color:(上,右,下，左)


border: 样式  宽度   颜色
                    ======================重要内容=====================注意某个属性没有生效一定是 单词拼错了或者未渲染，父布局或者上面代码就有问题====================
float:left;  可以让左右 div  从左到有排列而不是默认从上到下

.div9,.div6,.div7 ,.div8{  多个并列写，必须之间 加上  逗号


background-color:yellow;
-->
<head>
<title>
  边框属性设置
</title>

<meta charset="utf-8">

<style type="text/css">

    div{

        float:left;
        backgroud-color:red;
        border-style:solid;
    }
        .div1{



        backgroud-color:#f2f2f2;
        border-style-left:dashed;
        border-color:green;
    }
        .div2{



        backgroud-color:#f2f2f2;
        border-style:dotted;
        border-color:red;
    }
        .div3{


        backgroud-color:#f2f2f2;
        border-style:double;
        border-color:blue;
    }
        .div4{


        backgroud-color:#f2f2f2;
        border-style:solid;
        border-color:yellow;
    }
    .div9,.div6,.div7,.div8{
        border-width:30px;
        width:80px;
        height:50px;
        backgroud-color:green;
        border-bottom-color:green;

    }
    .div6{


        border-style:groove;

    }
    .div7
    {
        border-style:ridge;
    }

    .div8{
        border-style:inset;
    }
    .div9{
        background-color:yellow;

       border-style:outset;
    }

</style>

</head>

<body>
    <div class="div1">


      边框1
</div>



    <div class="div2">


      边框2


    </div>

    <div class="div3">


      边框3


    </div>

    <div class="div4">

      边框4


    </div>

    <div class="div5">


      边框5


    </div>
        <div class="div6">


      边框凸槽


    </div>
        <div class="div7">


      边框垄状


    </div>
        <div class="div8">


      边框inset


    </div>
    <div class="div9">


      边框outset


    </div>  


</body>

<html>

跟随视频学习，手写记录自己学习过程中的点点滴滴，一起加油吧。

豆皮青椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
边框美学：HTML border属性详解
a451319296的博客
05-20 6827
本文介绍了HTML的border属性，包括其语法和常见的属性值。通过边框宽度、样式和颜色的设置，可以实现丰富多彩的HTML元素样式。同时，也提供了使用内联样式、内部样式表和外部样式表的方式来使用border属性的方法。读者可以通过本文全面了解HTML border属性的用法和应用场景，从而为自己的网站设计提供更加美观的视觉效果。
css边框(border)属性
码上行动
04-29 3037
border属性 代码如下： border：边框宽度 边框风格 边框颜色; 如：border:5px solid #555; 属性： （1）边框宽度： border-width:5px; （2）边框颜色： border-color:red; （3）边框样式： border-style:solid/dashed/dotted/double; 实线/ 虚线 /点线 /双线 整体设置： 1个值时：默认为四条边都设置 2个值时：1上下 2左右 3个值时：1上 2左右 3下 4个值时：上 右
HTML DOM border 属性
lyq_33的博客
05-11 327
border 属性在一个声明中设置所有边框属性。 语法： Object.style.border=borderWidth borderStyle borderColor 值 描述 值 borderWidth 设置边框的宽度。 thinmediumthicklength borderStyle 设置边框的样式。 nonehidde
html--盒子的边框属性（border）
weixin_47295886的博客
07-12 1万+
border的属性+属性值==边框
html语言border,htmlborder长度 css中border的属性
weixin_36465618的博客
06-02 1047
css中border-solid长度问题html的border可以设置显示百分之几长的吗不能，border是显示边框宽度的，不是调节长度的。试过，不能用百分率来调节。望喜欢。请问HTML语句中“border=1”是什么意思，。css中border的属性css中boder的颜色、厚度、宽度、高度怎么设置CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。 在表格中：bor...
CSS Border(边框)
m0_68049714的博客
03-28 4501
每一个边框有3个方面：样式、宽度以及颜色： 边框样式：Border-style值: none:默认无边框 dotted:定义一个点线框 dashed:定义一个虚线框 solid:定义实现边界 double:定义两个边界。两个边界的宽度和border-width的值相同 groove:定义3D沟槽边界。效果取决于边界的颜色值 ridge:定义3D 脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset:定义一个3D突出边框。效果取决于边界的颜
一个属性border-collapse解决Table的边框问题
09-25
border-collapse属性的主要作用是控制表格的边框合并行为，当它的值被设置为“collapse”时，表格的边框会合并为单一边框，这样就完美解决了双边框的问题。 通过使用border-collapse属性，网页设计师们不再需要为每...
CSS3之边框多颜色Border-color属性使用示例
09-25
CSS3的Border-color属性是专门用来实现边框多颜色效果的属性。它允许我们为一个元素的边框指定多个颜色，从而创造出不同于传统单色边框的视觉效果。这一特性在网页设计中尤其有用，可以用来增强网页元素的视觉吸引力...
HTML表格标记教程(2):表格的边框属性BORDER
12-09
通过BORDER属性定义边框线的宽度，单位为像素。 文件范例：10-2.htm 设定边框线的宽度。01 <!– —————————— –>02 <!– 文件范例：10-2.htm –>03 <!– 文件说明：设定表格的边框宽度 –>04 <...
html border线型属性值,CSS 属性 border
weixin_39929723的博客
06-04 1093
前言border-image 是 CSS3 的一个属性，将图片规定为包围元素的边框，就像border定义边框那样，border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等),而border-image使用图片来丰富包围的元素,给边框设置不同的图片效果。因为它是css3中的属性，所以在浏览器兼容方面我就不多说了，可以去 http://caniuse...
HTML连载37-边框属性（下）、边框练习
weixin_44630050的博客
09-16 211
一、边框属性 1.连写（分别设置四条边的边框） border-width:上 右 下 左； border-style:上 右 下 左； border-color:上 右 下 左； 注意点： （1）这三个属性是按照顺时针来赋值的，也就是说按照上右下左来赋值，而不是按照日常生活中的上下左右 （2）关于省略 i.三个（省略左）左右一样，上下按照咱们写的 ii.两个（省略左、下）左右一样，上下一样 ii...
HTML连载36-精灵图练习、边框属性（上）
weixin_44630050的博客
09-11 173
一、精灵图练习 练习：用精灵图表示出“RUI” 工具：Adobe Fireworks 方法：（1）打开Adobe Fireworks（2）选取一张26个英文字母图片 （3）先把我们这张图片的图层锁定，原因：防止图片被修改，不可恢复 按图片中的顺序进行操作。 （4）按顺序进行选取，选择裁剪工具（我们的目的并非真正裁剪，之所以用Adobe的这个工具，是因为如3可以显示这个裁剪区域的实际大小，以及左...
html表格样式及border,align属性
qq_43320218的博客
03-30 1450
是让表格内容在表格中居中显示。现在不推荐这样做，因为用样式也可以实现同样的效果。表格在浏览器中是居中的，因为table标签后加入了。表的效果图如下，可以实现合并行和合并列的操作，用。如果仅仅用border属性，表格边框是双线，设置。首先上一段最基本的表格绘制代码。规定表格单元周围是否显示边框。就需要用到以下两个css属性。，且表格不用于布局目的。
html中border的作用,border在html中是什么意思
weixin_42131601的博客
06-11 1万+
border在html中的意思：border属性是在一个声明中设置所有边框属性，语法为【Object.style.border=borderWidth borderStyle borderColor】。本教程操作环境：windows7系统、html5版，DELL G3电脑，该方法适用于所有品牌电脑。border在html中的意思：border 属性在一个声明中设置所有边框属性。语法：Object....
CSS border 属性
songxueyan214的专栏
06-09 764
border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-width border-style border-color 如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。 border-width    所有浏览器都支持 border-width 属性。   注释：任何的
边框border属性总结
tuke_tuke的博客
10-21 1148
留着这些属性自己以后方便看： 其中border-style的值是： html> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groov
盒子模型
December_shi的博客
09-13 448
盒子模型（CSS重点） 1.盒子边框（border） 语法： border:border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框颜色 边框的样式： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线（最为常用的） dashed：边框为虚线 dotted：边框为点线 2.
HTML关于border属性的一点小领悟
wolfalcon的专栏
06-12 1万+
在写HTML的时候我们经常会想变换border的颜色或者风格。大多数时候我们是这样做的。我们为这里的li设置了一个border，然后我们现在想改变border-bottom的颜色。通常我们会有两种做法：左侧截图中的方法能够改变border-bottom的颜色，而右侧和下侧截图这种两种方式border-bottom的颜色将不会发生变化。如果想改变border-bottom的颜色，又不想在原来的CSS...
HTML与CSS基础：边框属性border详解
在HTML与CSS的基础学习中，边框属性`border`是样式化元素外观的重要组成部分。边框允许我们控制元素四周的外观，可以通过设置`border-width`来调整边框的厚度，`border-style`来选择边框的样式，比如实线(solid)、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值