CSS border（边框）样式写法总结

border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

创新互联公司是一家专注于网站建设、成都做网站与策划设计,牡丹网站建设哪家好?创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:牡丹等地区。牡丹做网站价格咨询:18980820575

语法：border： border-width | border-style | border-color;

border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。

 border-top-width：设置元素上边框宽度

 border-right-width：设置元素右边框宽度

 border-bottom-width：设置元素下边框宽度

 border-left-width：设置元素左边框宽度

border-style ：边框样式。

 border-top-style：设置元素上边框样式

 border-right-style：设置元素右边框样式

 border-bottom-style：设置元素下边框样式

 border-left-style：设置元素左边框样式

 属性值有：

  none：无边框。

  hidden：隐藏边框。对于表，hidden 用于解决边框冲突。

  dotted：点状边框。

  dashed：虚线边框。

  solid：实线边框。

  double：双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove：3D凹槽边框。

  ridge：3D垄状边框。

  inset：凹边框。

  outset：凸边框。

border-color ：边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同，样式相同

1.4 四条边颜色相同，样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _

css中font、background、border样式的简写

font样式简写:

font:[font-style] [font-weight] [font-size] / [font-height] [font-family]

background样式简写:

background:[background-color] [background-image] [background-repeat] [background-position] / [background-size]

border样式简写:

border:[border-width] [border-style] [border-color]

其中font和background的样式属性顺序不可换，且"/"不可忽略，border的样式属性的顺序可任意。

css简写都有哪些？

使用缩写可以减少CSS文件的大小，并且更加易于阅读。本文主要介绍CSS的主要缩写规则，内容涉及到颜色、盒尺寸、边框、背景、字体、列表等方面的内容。CSS缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下：

border-width:1px; border-style:solid; border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是 border:width style color;

背景(Backgrounds)

背景的属性如下：

background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是 background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent image: none repeat: repeat attachment: scroll position: 0% 0%

字体(fonts)

字体的属性如下：

font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

CSS基础知识点全面解析（转载）

基本

常识与实践

链接方式

基本

最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了

"style="background-image:url({{user.avatar}})"

内部链接

要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面

style

p {

color: gray;

}

/style

css文件外置

另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:

link type="text/css" rel="stylesheet" href="lounge.css"

多样式表

使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:

link rel="stylesheet" href="corperate.css"//总公司样式

link rel="stylesheet" href="beverage-division.css"//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式

link rel="stylesheet" href="lounge-seattle.css"//西雅图休闲室对样式表做了自己的调整

简写

css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。

简写格式

padding

padding: 0px 40px 30px 20px;,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px;

padding-top: 0px;

padding-right: 40px;

padding-bottom:30px;

padding-left: 20px;

margin

上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。

border

边框属性简写 border: thin solid #007e73;,可以用你喜欢的任何顺序。

background

背景简写 background: white url(images/cocktail.gif) repeat-x;，同样顺序随便

字体

字体简写的格式稍微复杂一些:

font : font-style font-variant font-weight font-size/line-height font-family

选择

子孙选择器

父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如

color: black;

}

直接孩子

如果要选择直接的孩子,用

color: black;

}

复杂选择

更复杂的选择,方法还是一样

color: blue;

}

规则添加

类

当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:

p class="greentea"

...

/p

类元素选择器

先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:

p.greentea {

color: green;

}

添加类元素

如果想对所有blockquote也做同样的处理，可以:

blockquote.greentea,p.greentea {

color: green;

}

blockquote class = "greentea"

类选择器

如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要对类中的所有元素都用同一样式可以用:

.greentea{

color: green;

}

/ 省略所有元素名,只有一个点,则会应用到所有成员 /

多类元素

元素可以有多个类,例如:

p class="greentea raspberry blueberry"

特定元素选择器

如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?

id

id的作用

id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如

p id="footer".../p

选择元素

用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配

color: red;

}//选择id为footer的任意元素

p#footer{

color: red;

}//选择id为footer的p元素

实践建议

继承

样式继承

层叠

媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如

link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"

link rel="stylesheet" href="lounge-print.css" media="print"

css媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如

@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用

margin-right: 250px;

}

}

@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用

margin-right: 30px;

}

}

@media print { // 如果要打印页面，使用该规则

body {

font-family: Times, "Times New Roman", serif;

}

}

实践建议

属性

盒模型

盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:

border 边框

color 颜色

文本元素的字体颜色

body{

background-color: rgb(80%, 40% , 0%)//橙色

}

还可以指定0-255之间的一个数值,例如:

body{

background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...

}

font-family 字体

大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:

body{

font-family: Verdana, Geneva, Arial, sans-serif; 一一首选字体呈降序

}

字体系列

每个font-family包含一组有共同特征的字体。共有5个字体系列:

body { font-size : small; }

h1 { font-size : 150%; }

h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本缩放

浏览器默认字体大小

其他属性

left 指定一个元素的左边所在位置

top 控制一个元素顶部的位置

background-image 在元素后面放置一个图像,如

background-image: url(images/background.gif);

//用url括起来,注意没有引号

background-repeat 背景图像是否重复

line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍

}

width: 200px;

float: right;

}

background-color: #675c47;

color: #efe5d0;

text-align: center;

padding: 15px;

margin: 10px;

font-size: 90%;

clear: right;

}

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

}

那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间

凝胶布局 Jello

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

margin-left: auto;

margin-right: auto;

}

绝对定位

position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

display: table;

border-spacing: 10px;//于是不再需要div中的外边距

}

display: table-row;

}

display: table-cell;

background: #efe5d0 url(images/background.gif) top left;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom

}

display: table-cell;

background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;

}

10.css盒子模型-边框常用写法及简写

为元素设置边框

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

可选值：

style也可以分别指定四个边的边框样式，规则和width一致，

同时它也提供border-xxx-style四个样式，来分别设置四个边

示例:

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

而且没有任何的顺序要求

border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

html CSS 边框属性border的边框大小，颜色，样式的缩写格式！

你那样写的话，必须是宽度、样式、颜色都一样。

如果不一样就得分开写。

你举得例子的正确写法是：

{

border:1px solid;

border-color:red green blue yellow;

}

网页标题：css边框属性样式简写,css边框类型
文章路径：http://azwzsj.com/article/dsdjdjp.html