border 复合属性。设置对象边框的特性。

标签定义及使用说明

如果上述值缺少一个没有关系,例如border:#FF0000;是允许的。

  • 默认值: not specified
  • 继承: no
  • JavaScript 语法: object object.style.border="3px solid blue"

属性值

border-width 指定边框的宽度

border-style 指定边框的样式

border-color 指定边框的颜色

inherit 指定应该从父元素继承border属性值

相关

  • border-bottom 复合属性。设置对象底部边框的特性。
  • border-left 复合属性。设置对象左边边框的特性。
  • border-right 复合属性。设置对象右边边框的特性。
  • border-top 复合属性。设置对象顶部边框的特性。

border-color 置或检索对象的边框颜色。

相关

  • border-bottom-color 设置或检索对象的底部边框颜色。
  • border-left-color 设置或检索对象的左边边框颜色。
  • border-right-color 设置或检索对象的右边边框颜色。
  • border-top-color 设置或检索对象的顶部边框颜色

border-style 设置或检索对象的边框样式。

属性定义及使用说明

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

border-style:dotted solid double dashed;

默认值: not specified

继承: no

JavaScript 语法: object object.style.borderStyle="dotted double"

属性值

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 规定应该从父元素继承边框样式。

相关

  • border-bottom-style 设置或检索对象的底部边框样式。
  • border-left-style 设置或检索对象的左边边框样式。
  • border-top-style 设置或检索对象的顶部边框样式。
  • border-right-style 设置或检索对象的右边边框样式。

border-width 设置或检索对象的边框宽度。

相关

  • border-bottom-width 设置或检索对象的底部边框宽度。
  • border-top-width 设置或检索对象的顶部边框宽度。
  • border-right-width 设置或检索对象的右边边框宽度。
  • border-left-width 设置或检索对象的左边边框宽度。

outline 复合属性。设置或检索对象外的线条轮廓。


outline-color 设置或检索对象外的线条轮廓的颜色。


outline-style 设置或检索对象外的线条轮廓的样式。


outline-width 设置或检索对象外的线条轮廓的宽度。


border-bottom-left-radius 设置或检索对象的左下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数


border-bottom-right-radius 设置或检索对象的右下角圆角边框。


border-image 设置或检索对象的边框样式使用图像来填充。


border-image-outset 规定边框图像超过边框的量。


border-image-repeat 规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。


border-image-slice 规定图像边框的向内偏移。


border-image-source 规定要使用的图像,代替 border-style 属性中设置的边框样式。


border-image-width 规定图像边框的宽度。


border-radius 设置或检索对象使用圆角边框。


border-top-left-radius 定义左上角边框的形状。


border-top-right-radius 定义右下角边框的形状。


box-decoration-break 规定行内元素被折行


box-shadow 向方框添加一个或多个阴影。

定义和用法

默认值: none

继承性: no

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。从阴影尺寸范围向外模糊多少距离逐渐变淡
  • spread 可选。阴影的尺寸。 默认为0和元素大小相同,当为10px时,在原大小上长宽扩大10px。
  • color 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。spread:距离边框的阴影大小,0时为无。blur:依然为spread到消失的距离,不过是变成向内了。h-shadow\v-shadow为显示的阴影水平和垂直偏移距离,当spread为0时阴影是存在的,只是在元素以外的不显示,偏移后就出现了。

例子

box-shadow: 10px 10px 5px 5px #888888;

边框(Border) 和 轮廓(Outline) 属性的更多相关文章

  1. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  2. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. 利用边框border的属性做小符号

    前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右:  其css代码如下: .fuhao { pos ...

  4. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  5. W3School-CSS 边框(border)实例

    CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...

  6. CSS控制边界、边框与外轮廓

    一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...

  7. 轮廓Outline|表格Table实例

    1.使用outline属性在元素周围画一条线. border:red solid thin; outline:#00ff00 dotted thick; outline-style:dotted|da ...

  8. 简单了解css3轮廓outline

    outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outli ...

  9. CSS 不规则的轮廓-outline

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

随机推荐

  1. 如何通过C#操作Access,本人亲测通过

    1. c# 操作access数据库 // it's your DB file path: // ApplicationEXEPath\Test.mdb var DBPath = "d:\\T ...

  2. onclick事件触发 input type=“file” 上传文件

    添加按钮: <input type="button" name="button" value="浏览" onclick="j ...

  3. LeetCode 543. Diameter of Binary Tree (二叉树的直径)

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...

  4. sqoop1.4.6从mysql导入hdfs\hive\hbase实例

    //验证sqoop是否连接到mysql数据库sqoop list-tables --connect 'jdbc:mysql://n1/guizhou_test?useUnicode=true& ...

  5. 【JAVA零基础入门系列】Day13 Java类的继承与多态

    继承是类的一个很重要的特性,什么?你连继承都不知道?你是想气死爸爸好继承爸爸的遗产吗?(滑稽) 开个玩笑,这里的继承跟我们现实生活的中继承还是有很大区别的,一个类可以继承另一个类,继承的内容包括属性跟 ...

  6. HDU1166 敌兵布阵(树状数组)

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  7. 1041: [HAOI2008]圆上的整点

    1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4298  Solved: 1944[Submit][Sta ...

  8. ACM课程总结

    当我还是一个被P哥哥忽悠来的无知少年时,以为编程只有C语言那么点东西,半个学期学完C语言的我以为天下无敌了,谁知自从有了杭电练习题之后,才发现自己简直就是渣渣--咳咳进入正题: STL篇: 成长为一名 ...

  9. 2015ACM/ICPC亚洲区沈阳站 B-Bazinga

    Bazinga Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  10. 蓝桥杯-算法训练--ALGO-5 最短路

    问题描述 给定一个n个顶点,m条边的有向图(其中某些边权可能为负,但保证没有负环).请你计算从1号点到其他点的最短路(顶点从1到n编号). 输入格式 第一行两个整数n, m. 接下来的m行,每行有三个 ...