css如何设置边框

在 HTML中,我们使用表格来创建文本周围的边框,有些效果差强人意,但是如果通过使用 CSS 边框属性,我们将可以创建出效果更加出色的边框,并且可以应用于任何元素。  CSS的 border‐style 属性定义了10个不同的非 inherit 样式,包括 none属性描述none默认无边框dotted定义一个点线边框dashed定义一个虚线边框solid定义实线边框double定义两个边框。 两个边框的宽度和 border-width 的值相同groove定义3D沟槽边框。效果取决于边框的颜色值ridge定义3D脊边框。效果取决于边框的颜色值inset定义一个3D的嵌入边框。效果取决于边框的颜色值outset:定义一个3D突出边框。 效果取决于边框的颜色值inherit规定应该从父元素继承边框样式当然我们可以单独为某一条边框设置样式,这需要用到特定的属性也可以不用分开设置样式、宽度和颜色,因为这样看起来太复杂了,我们可以使用简写属性boder一次搞定,下表总结了不管是单独设置还是一次搞定的所有属性,详情如下:属性描述border简写属性,用于把针对四个边的属性设置在一个声明。border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色border-bottom简写属性,用于把下边框的所有属性设置到一个声明中border-bottom-color设置元素的下边框的颜色border-bottom-style设置元素的下边框的样式border-bottom-width设置元素的下边框的宽度border-left简写属性,用于把左边框的所有属性设置到一个声明中border-left-color设置元素的左边框的颜色border-left-style设置元素的左边框的样式border-left-width设置元素的左边框的宽度border-right简写属性,用于把右边框的所有属性设置到一个声明中border-right-color设置元素的右边框的颜色border-right-style设置元素的右边框的样式border-right-width设置元素的右边框的宽度border-top简写属性,用于把上边框的所有属性设置到一个声明中border-top-color设置元素的上边框的颜色border-top-style设置元素的上边框的样式border-top-width设置元素的上边框的宽度

(0)

相关推荐

  • WEB之CSS系列笔记

    CSS,通常称为CSS样式表或层叠样式表(级联样式表).主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图形的外形(宽高.边框样式.边距等)以及版面布局和外观显示样式. 引入CSS样式 ...

  • HTML5与CSS3权威指南【笔记】

    一.Web时代的变迁 二.HTML5与HTML4的区别 1.新增的元素:section.article.aside.header.hgroup.footer.nav.figure.video.audi ...

  • CSS样式内容

    通过使用 CSS 我们可以大大提升网页开发的工作效率和美化我们的页面,那CSS样式都包括哪些内容呢,以下是列表供大家参考:CSS 语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.CS ...

  • 前端面试题之CSS

    两种盒模型 盒模型分为W3C的标准模型和IE模型 盒模型又称为框模型,包含了元素内容(content).内边距(padding).外边距(margin).边框(border) 如图: W3C的标准模型 ...

  • css总结-笔记--部分非原创--属于资源整合

    文章目录 一.css基础教程 选择器的优先级: 4.1.派生选择器 4.2.id选择器 讨论:为什么相同id的值在每个 HTML 文档中只能出现一次? 3.1选择器的分组 3.2曾经存在过的继承问题 ...

  • Style 对象属性

    "CSS" 列表示该属性是在哪一个CSS 版本中定义的(CSS1.CSS2 或 CSS3).属性描述CSSalignContent设置或返回当灵活容器内的各项没有占用所有可用的空间 ...

  • (办公)html5与css3的相关知识

    (办公)html5与css3的相关知识

  • 「学习笔记」CSS基础

    前言 拖延了一周的CSS学习笔记终于利用周末去补齐了,本篇文章着重梳理之前所学的CSS知识点,查漏补缺.同时,试着用git将重点案例存放到远程仓库中,更近一步贴近公司流程.

  • word图片编辑工具视频:删除背景设置边框及艺术效果

    word图片编辑工具视频|word删除图片背景视频|word设置图片边框视频|word图片艺术效果视频 本视频教程由部落窝教育分享.

  • 如何为Word文档封面设置边框?

    某大学毕业生在制作毕业论文时,希望为论文封面(第一页)添加艺术边框,以达到美化效果,而其他页不添加艺术边框,效果如图 3‑5所示,该如何实现? 图3‑5效果图 1 解决方案 首先将文档设置为" ...

  • 在excel表格中如何设置边框和底纹?

    在使用excel表格的过程中,我们在建立工作表时,需要对表格的边框和底纹进行装饰,这样可以让工作表看起来更美观.那么,如何为excel表格添加边框和底纹呢?下面就由小编来做个讲解. 1.启动excel ...

  • 5种CSS实现渐变色边框(Gradient borders方法的汇总

    WEB前端开发社区 2021-10-21 给 border 设置渐变色是很常见的效果,实现这个效果有很多思路,今天把我所知道的方法罗列于此供大家参考. 1.使用 border-image css 提供 ...

  • uniGUI: 通过css设置Panel的四个边框

    作者: dmzn (dmzn)★☆☆☆☆-盒子活跃会员2021/9/3 0:43:06标题:uniGUI: 通过css设置Panel的四个边框浏览:26加入我的收藏楼主:有时候需要去掉Panel的某些 ...

  • word表格边框加粗怎么设置

    在用word文档进行表格编辑时,偶尔需要对表格的边框进行加粗设置,那么该怎么操作呢?下面一起来了解一下. 1.在电脑上启动需要修改表格边框的word文档. 2.将需要加粗边框的表格全部选中. 3.在开 ...

  • [css] 第120天 设置字体时为什么建议设置替换字体?

    今日试题: 设置字体时为什么建议设置替换字体? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试 ...

  • [css] 第105天 怎么实现移动端的边框0.5px?

    今日试题: 怎么实现移动端的边框0.5px? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每 ...

  • [css] 第95天 当一个元素被设置为浮动后,它的display值变为什么呢?

    今日试题: 当一个元素被设置为浮动后,它的display值变为什么呢? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多 ...