html边框线的尺寸,Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性(示例代码)

一、CSS 单位

尺寸单位

- %  : 百分比

- in : 英寸

- cm : 厘米

- mm : 毫米

- pt : 磅(1pt等于1/72英寸)

- px : 像素(计算机屏幕上的一个点)

- em : 1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍

颜色单位

- rgb(x,x,x)   : RGB 值，如 rgb(255,0,0)

- rgb(x%,x%,x%): RGB 百分比值，如 rgb(100%,0%,0%)

- #rrggbb:十六进制数，如 #ff0000

- #rgb：简写的十六进制数，如 #f00

- 表示颜色的英文单词，如 red

二、CSS 尺寸属性

尺寸

- 尺寸属性是用于设置元素的宽度和高度

- 单位一般为像素或百分比

- 宽度属性

- width

- max-width

- min-width

- 高度属性

- height

- max-height

- min-height

溢出

- 使用尺寸属性控制框的大小时，如果内容所需的空间大于框本身的空间，会导致内容溢出

- overflow:当内容溢出元素框时如何处理

- visible

- hidden

- scroll

- auto

- overflow-x:

- overflow-y:

HTML元素设置尺寸属性的元素有哪些

- 块级对象，如

- p

- div

- h1,h2,h3,h4,h5,h6

- ul,ol,li,dl,dt,dd等

- 存在width、height属性的HTML元素

- img

- table等

三、CSS 边框属性

边框

- 简写方式

- border:width style color;

- 单边定义

- border-left/right/top/bottom:width style color;

- border-width

- border-left/right/top/bottom-width

- border-style

- border-left/right/top/bottom-style

- border-color

- border-left/right/top/bottom-color

边框颜色，可设置为值 transparent(用于创建有宽度的不可见边框)

边框倒角

- border-radius 属性

- 为简写属性，按顺时针顺序设置四个倒角

- 取值为绝对值或者百分比

- 单独定义

- border-top-left-radius:边框左上角

- border-top-right-radius:边框右上角

- border-bottom-left-radius:边框左下角

- border-bottom-right-radius:边框右上角

边框阴影

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

- 取值为多个属性值的列表

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

- 其中

- h-shadow : 必需，为水平阴影的位置

- v-shadow : 必需，为垂直阴影的位置

- blur     : 可选，为模糊距离

- color    : 可选，为阴影的颜色

- inset    : 可选，将外部阴影(outset)改为内部阴影

图片边框

- border-image属性:将图片规定为包围div元素的边框

- border-image: source width repeat;

- 也可以分别设置

- border-image-source: 图片的路径

- border-image-width:  图片边框的宽度

- border-image-repeat: 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

轮廓

- 轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

- 简写方式

- outline:color style width;        

- outline-width:轮廓的宽度

- outline-style:轮廓的样式

- outline-color:轮廓的颜色

总结：本章内容主要介绍了 Css 尺寸单位、尺寸属性与边框属性。

本文出自 “技术交流” 博客，谢绝转载！