css边框属性详细总结

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线.

边框的样式 (border-style)

样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。

a,css 边框样式分为10种不同的非inherit样式:如下:

统一风格

1,none 无边框

2,solid 直线边框

3,dashed 虚线边框

4,dotted 点状边框

5,double 双虚线边框

6,groove 凸槽边框

7,ridge 垄状边框

8,inset  inset边框

9,outset outset边框

10,inherit继承

b,定义单边样式 分为以下4种样式

单独风格

1,border-bottom-style 下边边框样式

2,border-top-style   上边边框样式

3,border-left-style   左边边框样式

4,border-right-style   右边边框样式

因此这两种方法是等价的:

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。

边框宽度(border-width)

统一风格

border-width属性值:

1,thin 细边框

2,medium中等边框

3,thick粗边框

4,px固定值边框

5,inherit 继承

p {

border-style: solid;

border-width: thick;

}

等同于

p {

border-style: solid;

border-width: 5px;

}

单边宽度

p {

border-style: solid;

border-width: 15px 5px 15px 5px;

}

也等同于

p {

border-style: solid;

border-top-width: 15px;

border-right-width: 5px;

border-bottom-width: 15px;

border-left-width: 5px;

}

边框颜色(border-color)

统一风格

p {

border-style: solid;

border-color: blue red;

}

单独风格

1,border-top-color    上边框颜色

2,border-bottom-color  下边框颜色

3,border-left-color   左边框颜色

4,border-right-color  有边框颜色

h1 {

border-style: solid;

border-color: black;

border-right-color: red;

}

时间: 2024-10-24 01:08:38

css边框属性详细总结的相关文章

CSS .css边框属性(border)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框属性</title> <style> /*.box{ height: 100px; width: 100px; background-color: #3385ff; border-top:1px double #000; border-rig

css 文本属性详细总结

CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 1,text-align 横向排列,也就是水平对齐 它会影响一个元素中的文本行互相之间的对齐方式 属性值有:left(默认),center,right p{ text-align:right } text-align:center 与 <CENTER> 您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相

[2016-01-17][CSS][边框属性]

border 简写属性在一个声明设置所有的边框属性.可以按顺序设置如下属性:  border-width 规定边框的宽度. thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. inherit 规定应该从父元素继承边框宽度. border-style 规定边框的样式. 值 描述 none 定义无边框. hidden 与 "none" 相同.不过应用于表时除外,对于表,hidden 用于解决边框冲突. dott

css边框属性

border 在一个声明中设置所有的边框属性: border-bottom 在一个声明中设置所有的下边框属性: border-bottom-color 设置下边框的颜色: border-bottom-style 设置下边框的样式: border-bottom-width 设置下边框的宽度: border-color 设置四条边框的颜色: border-left 在一个声明中设置所有的左边框属性: border-left-style 设置左边框的样式了: border-left-width 设置左

css 颜色属性详细总结

color 属性定义文本的颜色: color :green; color:#ff6600; 简写式: color:#f60 红(R),绿(G),蓝(B)每个的取值范围0-255 color:rgb(255,255,255) RGBA 分别代表 red 红色  ,green 绿色,  Blue 蓝色,Alpha的(色彩进空间)透明 color: rgba(255,255,255,1) css颜色对照编码连接: http://www.360doc.com/content/14/0924/20/108

css 字体属性详细总结

1,font-size属性设置字体的大小 声明: 有能力管理文本的大小在 web 设计领域很重要.但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落. 请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落. 使用像素来设置字体大小 (px) 通过像素设置文本大小,可以对文本大小进行完全控制: h1 {font-size:60px;} 使用百分比设置字体大小 (%) 父元素的百分比 body{ fo

css 背静属性详细总结

1,背景颜色background-color background-color 不能继承,其默认值是 transparent.transparent 有"透明"之意.也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见. p { background-color: gray;  和普通颜色设置是一样的 } 2.背景的图片background-img background-image: url(图片的路径); background-image: none

css 列表属性详细总结

列表类型(list-style-type) 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型. 在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序列表中,标志可能是字母.数字或另外某种计数体系中的一个符号. 属性值有以下: list-style-type:none无标记 list-style-type:disc默认,标记是实心圆 list-style-type:circle 空心圆 list-style-type:square实心方块 lis

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 - #