CSS——边框

定义

边框(Border)属性是对HTML元素的边框进行定义的CSS属性。

概述

通过边框的样式设置,给元素增加更丰富的外观

边框的设置包含以下内容:

  • 边框的类型
  • 边框的尺寸
  • 边框的前景背景
  • 圆角边框

列表

元素

描述

border

border 属性是规定各种单独的边界属性的简写属性,可用于设置一个或多个以下属性的值:border-width,border-style,border-color。

border-bottom

border-bottom 该属性是用来将下边框的所有属性:border-bottom-color, border-bottom-style 与 border-bottom-width 设置到一个声明中。

border-bottom-color

border-bottom-color该属性是用于规定一个元素底部边框的颜色。

border-bottom-style

border-bottom-style该属性是规定元素下边框的样式。

border-bottom-width

border-bottom-width该属性是一个用于规定一个元素下边框的宽度。

border-color

border-color该属性是一个用于规定元素四个边框颜色的快捷属性:border-top-color,border-right-color,border-bottom-color,border-left-color。

border-left

border-left 该属性规定元素的左边框属性。

border-left-color

border-left-color 该属性是一个用于规定元素的左边框的颜色。

border-left-style

border-left-style 该属性是一个用于设置各种单独的边界属性的简写属性,可用于设置一个或多个以下属性的值:border-width,border-style,border-color。

border-left-width

border-left-width 该属性是一个元素的左边框的宽度。

border-right

border-right 该属性是元素的右边框属性。

border-right-color

border-right-color 该属性是用于规定元素的右边框的颜色。

border-right-style

border-right-style 该属性是用于规定元素右边框的样式。

border-right-width

border-right-width 该属性是用于规定元素右边框的宽度。

border-style

border-style 该属性是用作规定元素所有边框的样式。

border-top

在一个声明中设置所有的上边框属性。

border-top-color

border-top 该属性表示元素的上边框属性。

border-top-style

border-top-style 该属性是用于规定元素的上边框的样式。

border-top-width

border-top-width 该属性是用于规定元素的上边框的宽度。

border-width

border-width 该属性是用于规定元素四条边框的宽度。

outline

outline 该属性是用于规定元素的轮廓属性。

outline-color

outline-color 该属性是用于规定元素的轮廓的颜色。

outline-style

outline-style 该属性是用于规定元素的轮廓样式属性。

outline-width

outline-width 该属性是用于规定元素的轮廓的宽度。

border-bottom-left-radius

border-bottom-left-radius 该属性用于规定元素的左下角边框的形状。

border-bottom-right-radius

border-bottom-right-radius 该属性用于规定元素的右下角边框的形状。

border-image

border-image 该属性用作给元素的边框添加背景图片。使用该属性时,会替换掉 border-style 属性所设置的边框样式。

border-image-outset

border-image-outset属性规定边框图像可超出边框盒的大小。

border-image-repeat

border-image-repeat 该属性用于规定图片如何填充边框。单个值,设置所有的边框;两个值,分别设置水平和垂直的边距。

border-image-slice

border-image-slice 该属性用于划分边框图片在9个区域所制定的图像:4个角,4个边和中间。

border-image-source

border-image-source 该属性规定<image>代替边框的样式。若此属性设置为none,使用边框样式代替。

border-image-width

border-image-width 该属性用作规定图像边框宽度。若 border-image-width 大于已指定的 border-width 则将向内部扩展。

border-radius

border-radius 该属性用作规定边框圆角。一个半径确定一个圆形;当使用两个半径时确定一个椭圆,该椭圆同边框的交集形成圆角效果。

border-top-left-radius

border-top-left-radius 该属性是用来规定元素左上角的圆角效果。圆角可以是圆或者椭圆的一部分。若其中有一个值为0,则无圆角效果。

border-top-right-radius

border-top-right-radius 该属性用于规定元素的右上角弧形。该弧形可能为一个椭圆,若一个值为0,就没有圆形。

box-shadow

box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果,几乎可用到任何元素。若同时在元素上设置了border-radius,阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。

变更点

CSS3增加了圆角边框等众多特效功能.

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa),作者:hudao

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS——属性列表

    Html5知典
  • CSS——尺寸

    缺省情况下,尺寸属性设定的高度和宽度仅适用于内容区域,不包括边框和内边距,这种高度宽度模式属于CSS自古以来的传统盒子模型。当前,本目录下各属性的参考文档都是基...

    Html5知典
  • @keyframes 属性——动画示例

    Html5知典
  • 玩转 CSS Border-Image

    读到书中介绍border-radius的内容时,提到了传说中的九宫格技术,其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角bor...

    歪马
  • css3 Border属性

     css3中关于Border的属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,...

    py3study
  • LeetCode 题解 | 406 号问题:根据身高重建队列

    假设有打乱顺序的一群人站成一个队列。每个人由一个整数对 (h, k)表示,其中 h 是这个人的身高,k 是排在这个人前面且身高大于或等于 h 的人数。编写一个算...

    五分钟学算法
  • Sass vs Less

    2007年发布,最早的一款CSS预处理器,带来了变量、常量、嵌套、混入、函数、循环等功能, 解决了CSS不可编程的短板。由于浏览器不能直接识别Sass,所以需要...

    前端黑板报
  • 安装 Windows 需要知道的 256 个问题

    2018-02-22 12:57

    walterlv
  • 整理一些资料工具

    Qt君
  • 微服务 2.0 技术栈选型手册

    2014年可以认为是微服务1.0的元年,当年有几个标志性事件,一是Martin Fowler在其博客上发表了“Microservices”一文,正式提出微服务架...

    芋道源码

扫码关注云+社区

领取腾讯云代金券