前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >5.边框样式-CSS基础

5.边框样式-CSS基础

作者头像
见贤思齊
发布2020-10-28 14:57:01
1.3K0
发布2020-10-28 14:57:01
举报
文章被收录于专栏:初见Linux

一、边框

几乎可以对所有元素定义边框。 我们可以为div元素img元素span元素table元素定义边框。

1.设置边框的三方面

  • 边框宽度
  • 边框外观(实线、虚线等)
  • 边框颜色
(1)边框样式属性

属性

说明

border-width

边框的宽度

border-style

边框的外观

border-color

边框的颜色

想要为一个元素定义边框样式,我们必须同时设置border-width、border-style、border-color这三个属性才会有效果

二、整体样式

1.边框属性

(1)border-width

border-width 属性定义了边框的宽度,属性值是一个像素值。

(2)border-style

border-width 属性定义了边框的外观,常用属性值如下:

① border-width常用属性值

属性值

说明

none

无样式

dashed

虚线

solid

实线

表中所列出的属性值是常用的,还有一些几乎用不上的值如:hidden、dotted、double等。

(3)border-color

border-width 属性定义了边框的颜色,属性值可以是关键字也可以是16进制RGB值

2.简写形式

想要为一个元素定义边框样式,我们必须同时设置border-width、border-style、border-color这三个属性才会有效果。但是这样写会造成代码量多,耗时费力,所以CSS为我们提供了一种简写形式,具体如下:

代码语言:javascript
复制
border-width:1px;
border-style:dashed;
border-color:#000000;
上面这段代码其实等价于:
border:1px dashed #000000;

这就是简写形式,这是一个很有用的小技巧,在实际开发中经常能看到它的身影。

3.示例

① 例1
代码语言:javascript
复制
<!--为图片元素添加边框-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            img{
                height: 300px;
                border: 2px solid #00FFFF;
            }
        </style>
    </head>
    <body>
        <img src="../img/水.jpg" alt="水天一色" title="水天一色">
    </body>
</html>

为img设置边框-整体样式.png

② 例2
代码语言:javascript
复制
边框样式.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/>
        <!--
            rel='stylesheet':(固定格式)引入样式表文件。
            type='text/css':(固定格式)标准CSS。
            href="文件路径"
        -->
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

边框样式.css
div{
    width:99px;                 /*元素选择器,选择所有div元素*/
    height:45px;
}
#div1{
    border:1px dashed #000000;  /*边框整体样式,简写形式*/
}
#div2{
    border:2px solid #FFC0CB;   /*边框整体样式,简写形式*/
}

为div设置边框-整体样式.png

三、局部样式

边框其实有4条边(上下左右),之前是对四条边的整体样式,若是想要对某一条边进行单独设置,就需要属性上边框border-top、下边框border-bottom、左边框border-left、右边框border-right

1.上边框:border-top

(1)语法格式

border-top: 1px solid #000000

2.下边框border-bottom

(1)语法格式

border-top: 1px solid #000000

3.左边框border-left

(1)语法格式

border-top: 1px solid #000000

4.右边框border-right

(1)语法格式

border-top: 1px solid #000000

5.总结

对于边框样式,无论是整体样式还是局部样式,都需要设置三个方面:边框宽度、边框外观、边框颜色

6.示例

① 例1
代码语言:javascript
复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            span{
                border: 1px solid #00FFFF;  /*边框整体样式*/
                border-bottom:0;            /*去除下边框*/
            }
        </style>
    </head>
    <body>
        <span>
            东风夜放花千树,更吹落、星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。 
            蛾儿雪柳黄金缕,笑语盈盈暗香去。<strong>众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</strong>
        </span>
    </body>
</html>

为span设置边框-局部样式.png

7.border-bottom:0;实际开发

可以看到,为span标签设置边框时,我先设置边框整体样式,接着设置下边框宽度为0(即border-bottom:0;),因为下边框没有宽度,所以下边框就被去除啦。 但我么知道想要为一个元素定义边框样式,我们必须同时设置border-width、border-style、border-color这三个属性才会有效果。但我们只设置了宽度,那边框的样式和边框的颜色怎么办? 实际上border-bottom:0;是一种省略写法,既然边框的宽度都没有,那为何还要设置边框的样式和边框的颜色此外,border-bottom:0;、border-bottom:0px;和border-bottom:none;这三个是等价的

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、边框
    • 1.设置边框的三方面
      • (1)边框样式属性
  • 二、整体样式
    • 1.边框属性
      • (1)border-width
      • (2)border-style
      • (3)border-color
    • 2.简写形式
      • 3.示例
      • 三、局部样式
        • 1.上边框:border-top
          • (1)语法格式
        • 2.下边框border-bottom
          • (1)语法格式
        • 3.左边框border-left
          • (1)语法格式
        • 4.右边框border-right
          • (1)语法格式
        • 5.总结
          • 6.示例
            • 7.border-bottom:0;实际开发
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档