CSS
背景和边框 | Backgrounds & Borders

背景和边框 | CSS Background and Borders

CSS Background and Borders

CSS背景和边框是CSS的一个模块,可以让你设计元素的背景和边框。背景可以填充颜色或图像,剪裁或调整大小,或者修改。边框可以用线条或图像装饰,并做成正方形或圆形。此外,元素盒可以用阴影装饰。

参照

CSS属性

  • background

  • background-attachment

  • background-clip

  • background-color

  • background-image

  • background-origin

  • background-position

  • background-position-x

  • background-position-y

  • background-repeat

  • background-size

  • border

  • border-bottom

  • border-bottom-color

  • border-bottom-left-radius

  • border-bottom-right-radius

  • border-bottom-style

  • border-bottom-width

  • border-collapse

  • border-color

  • border-image

  • border-image-outset

  • border-image-repeat

  • border-image-slice

  • border-image-source

  • border-image-width

  • border-left

  • border-left-color

  • border-left-style

  • border-left-width

  • border-radius

  • border-right

  • border-right-color

  • border-right-style

  • border-right-width

  • border-style

  • border-top

  • border-top-color

  • border-top-left-radius

  • border-top-right-radius

  • border-top-style

  • border-top-width

  • border-width

  • box-shadow

指南

使用多个背景说明如何在元素上设置一个或多个背景。缩放背景图像描述如何更改背景图像的大小和重复行为。使用CSS将颜色应用于HTML元素概述了如何在HTML中使用CSS颜色(包括边框)。

工具

边界图像生成器这个交互式工具可以让你可视化地创建边界图像(border-image属性).Border-radius generator这个交互式工具可以让你可视化地创建圆角(border-radius属性)。这个交互式工具可以让你直观的在元素后面创建阴影(box-shadow属性)。

规范

SpecificationStatusComment
CSS Backgrounds and Borders Module Level 3Candidate Recommendation
CSS Level 2 (Revision 1)Recommendation
CSS Level 1Recommendation

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier)4.03.51.0 (85)

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support(Yes)1.0 (1.9.2)(Yes)(Yes)1.0