CSS 基础（002_边框）

最新推荐文章于 2024-05-14 18:01:48 发布
最新推荐文章于 2024-05-14 18:01:48 发布
阅读量834 收藏 1
点赞数
分类专栏： CSS 文章标签： css

原始网址：http://www.w3schools.com/css/css_border.asp

翻译：

CSS Borders

CSS Border 属性

CSS border 属性允许我们指定元素边框的样式、宽以及颜色。

CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border: 1px solid black;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <p>I have borders on all sides.</p>
    </body>
</html>

CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border-bottom: 1px solid red;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <p>I have a red bottom border.</p>
    </body>
</html>

CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border: 1px solid grey;
                border-radius: 25px;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <p>I have rounded borders.</p>
    </body>
</html>

CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border-left: 5px solid blue;
                padding: 20px;
                background: LightCyan;
            }
        </style>
    </head>
    <body>
        <p>I have a blue left border.</p>
    </body>
</html>

边框样式（Border Style）

border-style 属性指定边框的呈现形式。

border-style 属性的取值有以下几种：

  • dotted - 定义点边框。
  • dashed - 定义虚线边框。
  • solid - 定义实线边框。
  • double - 定义双边框。
  • groove - 定义 3D 凹槽边框，效果取决于 border-color 的值。
  • ridge - 定义 3D 垄状边框，效果取决于 border-color 的值。
  • inset - 定义 3D inset 边框，效果取决于 border-color 的值。
  • outset - 定义 3D outset 边框，效果取决于 border-color 的值。
  • none - 定义无边框。
  • hidden - 定义隐藏边框。（与 none 相同。不过应用于 table 时除外，对于 table，hidden 用于解决边框冲突。）

border-style 属性可以有 1~4 个值（上边框、右边框、下边框、左边框）。

示例：

CSS 边框
CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                padding: 10px;
                border: 1px;
            }

            p.dotted {
                border-style: dotted;
            }

            p.dashed {
                border-style: dashed;
            }

            p.solid {
                border-style: solid;
            }

            p.double {
                border: 3px;
                border-style: double;
            }

            p.groove {
                border: 30px;
                border-style: groove;
                border-color: green;
            }

            p.ridge {
                border: 30px;
                border-style: ridge;
                border-color: green;
            }

            p.inset {
                border: 30px;
                border-style: inset;
                border-color: green;
            }

            p.outset {
                border: 30px;
                border-style: outset;
                border-color: green;
            }

            p.none {
                border-style: none;
            }

            p.hidden {
                border-style: hidden;
            }

            p.mix {
                border: 3px;
                border-style: dotted dashed solid double;
            }
        </style>
    </head>
    <body>
        <p class="dotted">A dotted border.</p>

        <p class="dashed">A dashed border.</p>

        <p class="solid">A solid border.</p>

        <p class="double">A double border.</p>

        <p class="groove">A groove border. The effect depends on the border-color value.</p>

        <p class="ridge">A ridge border. The effect depends on the border-color value.</p>

        <p class="inset">An inset border. The effect depends on the border-color value.</p>

        <p class="outset">An outset border. The effect depends on the border-color value.</p>

        <p class="none">No border.</p>

        <p class="hidden">A hidden border.</p>

        <p class="mix">A mixed border.</p>
    </body>
</html>
注意：只有在设置了 border-style 属性的情况下，以下 border 属性的设置才会起作用。

Border Width

border-width 属性指定边框（4条边）的宽。
可以将宽设置为具体的值（px、pt、cm、em 等等）或预定义值（thin、medium、thick）。
border-width 属性有 1~4 个值（上边框、右边框、下边框、左边框）。

示例：

CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border-style: solid;
                padding: 20px;
            }

            p.one {
                border-width: 5px;
            }

            p.two {
                border-width: medium;
            }

            p.three {
                border-width: 2px 10px 4px 20px;
            }
        </style>
    </head>
    <body>
        <p class="one">Some text.</p>

        <p class="two">Some text.</p>

        <p class="three">Some text.</p>
    </body>
</html>

Border Color

border-color 属性指定边框（4条边）的颜色。
可通过以下几种方式设置颜色值：

  • name - 指定颜色的名称，例如“red”。
  • Hex - 指定 hex 值，例如“#FF0000”。
  • RGB - 指定 RGB 值，例如“RGB(255,0,0)”。
  • transparent

border-color 属性有 1~4 个值（上边框、右边框、下边框、左边框）。
如果 border-color 没有设置，它将继承元素的颜色。

示例：
CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border-style: solid;
                padding: 20px;
            }

            p.one {
                border-color: red;
            }

            p.two {
                border-color: green;
            }

            p.three {
                border-color: red green blue yellow;
            }
        </style>
    </head>
    <body>
        <p class="one">Some text.</p>

        <p class="two">Some text.</p>

        <p class="three">Some text.</p>
    </body>
</html>

Border - Individual Sides

从以上示例中可知，对边框的每一条边进行不同的属性设置是可能的。
在 CSS 中，存在指定边框的每一条边（上边框、右边框、下边框、左边框）的属性。

示例：
CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                border-style: solid;
                padding: 20px;

                border-top-style: dotted;
                border-right-style: solid;
                border-bottom-style: dotted;
                border-left-style: solid;
            }

            /*
            p {
                border-style: dotted solid;
            }
            */
        </style>
    </head>
    <body>
        <p>2 different border styles.</p>
    </body>
</html>

Border - Shorthand Property

正如我们从以上示例中看到的那样，在处理边框的时候有很多可选的属性。
为了简化代码，将所有的单一属性指定在一个属性中是可行的。
border 属性是以下单一属性的简化版：

  • border-width
  • border-style (required)
  • border-color

示例：

p {
    border: 5px solid red;
}

我们也可以对边框的某一条边指定所有的单边属性。

/* Left Border */
p {
    border-left: 5px solid red;
    background-color: lightgrey;
}
/* Bottom Border */
p {
    border-bottom: 5px solid red;
    background-color: lightgrey;
}

Rounded Borders

border-radius 属性用以对元素的边框增加弧度。

示例：
CSS 边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Borders</title>
        <style type="text/css">
            p {
                padding: 20px;
            }

            p.normal {
                border: 2px solid red;
            }

            p.round1 {
                border: 2px solid red;
                border-radius: 10px;
            }

            p.round2 {
                border: 2px solid red;
                border-radius: 20px;
            }

            p.round3 {
                border: 2px solid red;
                border-radius: 30px;
            }
        </style>
    </head>
    <body>
        <p class="normal">Normal border</p>

        <p class="round1">Round border</p>

        <p class="round2">Rounder border</p>

        <p class="round3">Roundest border</p>
    </body>
</html>
注意：IE8 以及更低版本的 IE 浏览器不支持 border-radius 属性。
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
薇眠winter的博客
08-04 1286
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
css双重边框,【基础】CSS实现多重边框的5种方式
weixin_33782296的博客
08-03 2171
简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。1 利用描边(outline)属性方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外的浏览器。1.1 核...
CSS Border
SlimApp
07-15 763
CSS BorderCSS Border PropertiesThe CSS border properties allow you to specify the style and color of an element's border.Border StyleThe bor
CSS 基础（004_外边距）
Google2606的博客
10-12 436
原始网址：http://www.w3schools.com/css/css_margin.asp翻译：CSS Margins<!DOCTYPE html> <html> <head> <style> div.line { border-style: solid none; border-w
css基础--边框
m0_54510474的博客
05-20 1775
css基础，关于边框的一些美化操作，包括边框宽度、样式、颜色和圆角边框的设置等
P24-前端基础-CSS盒子模型_边框
Bruce小鬼
01-18 605
P24-前端基础-CSS盒子模型_边框 1.概述 边框有三个样式可设置 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style 2.CSS盒子模型_边框介绍 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型-边框</title> <style> .box {
css单线边框_css怎么设置table表格的边框为单线边框？（代码详解）
weixin_36399948的博客
01-14 6442
table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来看看给table表格添加边框后，它的默认效果：table,table td{border: 1px solid #000;}table td{padding: 10px 30px;}可以看出，table表格是以双...
P25-前端基础-CSS盒子模型_内边框
Bruce小鬼
01-18 832
P25-前端基础-CSS盒子模型_内边框 1.概述 内边距（padding） 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。 盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算 内容区和边框之间的距离是内边距 一共有四个方向的内边距： padding-top padding-right padding-bottom padding-left 2.CSS盒子模型_内边框 <!DOCTYPE html> <html&g
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS设计网页边框的几个实例
12-11
掌握CSS网页布局技术，网页边框效果的定义是基础内容，其中也涉及到CSS盒模型知识以及CSS属性简写知识。 相关文章阅读：CSS设计网页时的一些常用规范 实例一： CSS：p {padding: 15px; border: 1px solid black; } ...
CSS基础视频教程
07-22
内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分类等 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
详解CSS的border边框属性及其在CSS3中的新特性
09-27
主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变,需要的朋友可以参考下
学习CSS需要知道的CSS基础知识
09-25
可设置的CSS属性包括：字体属性、文本属性、颜色及背景属性、边框属性、容器属性（边距属性、填充属性）、分类属性、鼠标属性。
css基础教程pdf 思维导图
07-20
css基础知识解析，css思维导图 ，适用于小白，初学者 背景样式，边框，图片样式， 文字样式，伪类，列表，图标库·hover,float浮动 position定位 文本居中 盒子居中 布局 h5 新增
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
三月和九月的博客
05-11 946
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
css超出部分省略（单行、多行，多种方法实现）
最新发布
阿乐的博客
05-14 393
缺点:使用了私有属性。
CSS文字描边，文字间隔，div自定义形状切割
m0_61604012的博客
05-10 147
CSS文字描边，文字间隔，div自定义形状切割
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 299
TailwindCSS在vite项目中的安装与使用
HTML CSS基础
07-27
根据本学期所学习的HTML及CSS网页制作基础知识，我们可以了解到HTML是一种标记语言，用于创建网页结构和内容，而CSS则是一种样式表语言，用于控制网页的外观和布局。在网页制作中，我们需要掌握HTML的基本标签，如标题、段落、链接、图片等，以及CSS的基本属性，如颜色、字体、边框、背景等。同时，我们还需要了解网页的盒模型、浮动、定位等概念，以及响应式设计和网页优化的相关技术。通过学习这些基础知识，我们可以制作出美观、实用、易用的网页，为用户提供更好的浏览体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值