html手册 css手册
购物车
登陆 / 注册
微信扫码登陆
免费注册
CSS 教程手册（新）
CSS 教程手册（新）
-
CSS 入门教程
CSS速查总表
CSS 教程学习导读
CSS简介
CSS语法
CSS 创建
+
CSS 定位(Position)
+
CSS 布局(Layout)
+
CSS 尺寸 (Dimension)
+
CSS 外边距(Margin)
+
CSS 填充（Padding）
+
CSS 背景(Backgrounds)
-
CSS 边框(Border)
+
CSS 颜色(Color)
+
CSS 字体(Fonts)
+
CSS 文本(Text)
+
CSS 文本装饰(Text Decoration)
+
CSS 书写模式(Writing Modes)
+
CSS 列表样式(List)
+
CSS 表格(Table)
+
CSS 内容(Content)
+
CSS用户界面(User Interface)
+
CSS打印(Print)
+
CSS媒体查询(Media Queries)
CSS 链接(Link)
+
CSS 轮廓（Outline）
CSS 分组 和 嵌套(Grouping and Nesting)
CSS 浮动 (Float)
CSS 盒子模型（Box Model）
CSS 显示(Display)
CSS 导航栏(Navigation Bar)
CSS 溢出(Overflow)
CSS 下拉菜单(Drop down menu)
CSS 对齐(Align)
CSS 提示工具(Prompt Tool)
CSS 图片廊(Image Gallery)
+
CSS 图像透明/不透明(Opacity)
CSS 图像拼合技术(Image stitching technique)
CSS 媒体类型(Media Type)
+
Only IE
+
Only Webkit
+
Only Firefox
CSS 总结
+
CSS 原生手册
CSS 手册导读
CSS 选择器
CSS 听觉参考手册
CSS Web安全字体组合
CSS 动画
CSS 函数
CSS 单位
CSS 颜色
+
CSS 颜色值
CSS 颜色名
CSS 颜色十六进制
+
CSS 函数 Function
CSS attr() 函数
CSS calc() 函数
CSS linear-gradient() 函数
CSS radial-gradient() 函数
CSS repeating-linear-gradient() 函数
+
CSS选择器 Selectors
+
元素选择符
+
关系选择符
+
属性选择符
+
伪类选择符
+
伪对象选择符
+
CSS取值与单位 Values and Units
+
CSS 长度(Length)
+
CSS 角度(Angle)
+
CSS 时间(Time)
+
CSS 频率(Frequency)
+
CSS 布局(Layout-specific)
+
CSS 分辨率(Resolution)
+
CSS 文本(Textual)
+
CSS 函数(Functional)
+
CSS 生成内容(Content)
+
CSS 图像(Image)
+
CSS 数字(Numeric)
+
CSS语法与规则 Rules
!important
comment
@import
@page
@supports
+
CSS 属性 Property
border-top
scan
border-top-color
overflow-wrap
border-top-left-radius
text-size-adjust
border-top-right-radius
text-decoration-skip
text-underline-position
border-top-style
column-break-before
border-top-width
column-break-after
border-width
column-break-inside
bottom
text-fill-color
box-align
box-reflect
box-direction
tap-highlight-color
user-drag
box-flex
border-colors
box-flex-group
border-top-colors
box-lines
border-right-colors
box-ordinal-group
border-bottom-colors
border-left-colors
box-orient
scrollbar-3dlight-color
box-pack
scrollbar-darkshadow-color
box-shadow
scrollbar-highlight-color
box-sizing
scrollbar-shadow-color
caption-side
scrollbar-arrow-color
clear
scrollbar-arrow-color
clip
scrollbar-face-color
color
scrollbar-track-color
column-count
scrollbar-base-color
column-fill
behavior
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid-columns
grid-rows
hanging-punctuation
height
icon
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
nav-down
nav-index
nav-left
nav-right
nav-up
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
tab-size
table-layout
target
target-name
target-new
target-position
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
pointer-events
vertical-align
user-select
visibility
ime-mode
white-space
zoom
width
-webkit-appearance
word-break
@charset
word-spacing
text-stroke
word-wrap
text-stroke-width
z-index
text-stroke-color
writing-mode
<angle>
deg
​grad
rad
turn
s
align-content
ms
<frequency>
align-items
Hz
align-self
kHz
all
<fraction>
animation
<grid>
animation-delay
fr
animation-direction
gr
animation-duration
<resolution>
animation-fill-mode
dpi
animation-iteration-count
dpcm
dppx
animation-name
unset
animation-play-state
<string>
<url>
animation-timing-function
<identifier>
appearance
calc()
backface-visibility
toggle()
background
counter()
background-attachment
counters()
attr()
<image>
background-blend-mode
image()
background-clip
image-set()
background-color
<gradient>
background-image
repeating-radial-gradient()
background-origin
<integer>
background-position
<percentage>
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
page
border-image-slice
page-break-before
border-image-source
page-break-after
page-break-inside
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
device-width
border-right-color
device-height
border-right-style
orientation
border-right-width
aspect-ratio
border-spacing
device-aspect-ratio
border-style
color-index
monochrome
initial
inherit
RGBA
Color Name
HEX
RGB
HSL
HSLA
transparent
currentColor
<length>
em
ex
ch
rem
vw
vh
vmax
vmin
cm
mm
q
in
pt
pc
px
<number>
+
CSS附录 Appendix
颜色关键字(Color Keywords)
媒体类型(Media Types)
+
CSS HACK
条件Hack
属性级Hack
选择符级Hack
+
问题和经验
Bugs及解决方案列表
CSS技巧和经验列表
其它技巧和经验列表
参考资源列表

推荐手册

CSS 教程手册（新） >> CSS 入门教程 >> CSS 边框(Border)
其他教程参考

border-style

border-style
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
前端控 前端控 更新时间：2019-03-22 14:21:12

CSS border-style 属性

属性定义及使用说明

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例:

border-style:dotted solid double dashed;

  • 上边框是点状

  • 右边框是实线

  • 下边框是双线

  • 左边框是虚线

border-style:dotted solid double;

  • 上边框是点状

  • 右边框和左边框是实线

  • 下边框是双线

border-style:dotted solid;

  • 上边框和下边框是点状

  • 右边框和左边框是实线

  • border-style:dotted;

  • 所有4个边框都是点状

默认值: not specified
继承:no
版本:CSS1
JavaScript 语法: object object.style.borderStyle="dotted double"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性1.gif2.gif3.gif4.gif5.gif
border-style 1.0 4.0 1.0  1.0 3.5

属性值

值描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。

设置四个边框的样式：

实例

p
{
border-style:solid;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号
Copyright © 2018-2019 html中文网 All Rights html中文网，专注于大前端知识，一站式WEB前端开发自学平台！
工信部备案号： 皖ICP备18014864号-5    
提交