CSS border（邊框）樣式寫法總結(jié)

border屬性 ：在網(wǎng)頁中設(shè)置元素的邊框樣式?？赏瑫r設(shè)置邊框?qū)挾?、邊框樣式、邊框顏色。也可以單獨設(shè)置上邊、右邊、下邊、左邊的邊框。

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計,牡丹網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:牡丹等地區(qū)。牡丹做網(wǎng)站價格咨詢:18980820575

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

border-width ：邊框?qū)挾??？梢灾付ㄩL度值。如1px，1em（單位為px，pt，em等）?；蛘呤褂藐P(guān)鍵字medium（默認），thick，thin。

?border-top-width：設(shè)置元素上邊框?qū)挾?/p>

?border-right-width：設(shè)置元素右邊框?qū)挾?/p>

?border-bottom-width：設(shè)置元素下邊框?qū)挾?/p>

?border-left-width：設(shè)置元素左邊框?qū)挾?/p>

border-style ：邊框樣式。

?border-top-style：設(shè)置元素上邊框樣式

?border-right-style：設(shè)置元素右邊框樣式

?border-bottom-style：設(shè)置元素下邊框樣式

?border-left-style：設(shè)置元素左邊框樣式

?屬性值有：

??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 設(shè)置上邊框?qū)挾?、樣式、顏?/p>

1.6 設(shè)置右邊框?qū)挾?、樣式、顏?/p>

1.7 設(shè)置下邊框?qū)挾?、樣式、顏?/p>

1.8 設(shè)置左邊框?qū)挾?、樣式、顏?/p>

以上對border邊框?qū)傩赃M行了基礎(chǔ)操作，大家可以根據(jù)自己的經(jīng)驗為邊框制作出更漂亮的樣式。如若大家有什么更好的見解，那就在回復區(qū)暢所欲言吧，我定會吸取精華~如有寫錯歡迎大家回復，我以后定會更加細心 _

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的主要縮寫規(guī)則，內(nèi)容涉及到顏色、盒尺寸、邊框、背景、字體、列表等方面的內(nèi)容。CSS縮寫的主要規(guī)則如下：

顏色

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 方便的記憶方法是順時針，上右下左。具體應(yīng)用在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基礎(chǔ)知識點全面解析（轉(zhuǎn)載）

基本

常識與實踐

鏈接方式

基本

最基本的方式就是直接在html文件中指定元素樣式，這種方式不推薦，因為將表現(xiàn)層和結(jié)構(gòu)層混起來了

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

內(nèi)部鏈接

要為html直接增加css樣式，需要在元素中增加開始和結(jié)束style標記，css規(guī)則放在里面

style

p {

color: gray;

}

/style

css文件外置

另一種方式將css文件外置，如style.css,作為樣式表(stylesheets),然后從html眾創(chuàng)建一個到這個文件的外部鏈接,用元素,用外部樣式表的好處是要修改整個網(wǎng)站的樣式，只要進入這個樣式表，對css進行幾處修改即可。如:

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

多樣式表

使用多個樣式表,順序很重要，一個樣式表會覆蓋在它上面鏈接的樣式表中的樣式,有時會有一個樣式表作為頁面的基礎(chǔ)樣式，要修改樣式，鏈接這個樣式表，然后在下面提供自己的樣式表，指定要修改的樣式,如下所示:

link rel="stylesheet" href="corperate.css"http://總公司樣式

link rel="stylesheet" href="beverage-division.css"http://部門對總公司的樣式做了一些補充，甚至可以覆蓋公司的樣式

link rel="stylesheet" href="lounge-seattle.css"http://西雅圖休閑室對樣式表做了自己的調(diào)整

簡寫

css屬性太多，能不能不費吹灰之力就指定這些屬性呢？可以把同一屬性的值結(jié)合起來寫成一句,即簡寫。

簡寫格式

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

邊框?qū)傩院唽?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;

}

規(guī)則添加

類

當我們用選擇器選擇元素使用一個規(guī)則時,會對所有該元素應(yīng)用這個樣式，所以如何單獨地選擇這些元素呢?這里就需要類class,class可以定義一類元素，對屬于該類的所有元素應(yīng)用樣式.要將一個元素加入一個類，只需要增加屬性”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;

}

/ 省略所有元素名,只有一個點,則會應(yīng)用到所有成員 /

多類元素

元素可以有多個類,例如:

p class="greentea raspberry blueberry"

特定元素選擇器

如果多個選擇器都選擇了一個元素呢？例如上面的3個類都與p元素匹配，并且都定義了color屬性，那么那個會勝出?

id

id的作用

id屬性用來唯一地命名元素,通常你想對多個元素重用某些樣式，才能真正發(fā)揮類的作用。但是如果只有一個元素需要樣式，或者頁面上只有一個元素，那就應(yīng)該使用id,每個元素只能有一個id，頁面中只能有一個元素擁有特定id,一個元素有一個id，同時可以屬于一個或多個類,id中不允許出現(xiàn)空格或其他特殊字符,如

p id="footer".../p

選擇元素

用id選擇一個元素,需要在id前面使用一個#字符(類是[.]),id選擇器只與頁面中的一個元素匹配

color: red;

}//選擇id為footer的任意元素

p#footer{

color: red;

}//選擇id為footer的p元素

實踐建議

繼承

樣式繼承

層疊

媒體查詢

link媒體查詢

你可能想針對將要顯示頁面的設(shè)備調(diào)整頁面的樣式，可以用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規(guī)則,把對所有媒體類型都通用的規(guī)則放在@media規(guī)則下面,例如

@media screen and (min-device-width: 481px){//當設(shè)備屏幕寬度大于480px時使用

margin-right: 250px;

}

}

@media screen and (max-device-width: 480px){//當設(shè)備屏幕小于等于480px時使用

margin-right: 30px;

}

}

@media print { // 如果要打印頁面，使用該規(guī)則

body {

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

}

}

實踐建議

屬性

盒模型

盒模型是css看待元素的一種方式，css將每個元素看作由一個盒子表示,每個盒子由一個內(nèi)容區(qū)以及可選的內(nèi)邊距，邊框和外邊距組成。由內(nèi)而外分別是:

border 邊框

color 顏色

文本元素的字體顏色

body{

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

}

還可以指定0-255之間的一個數(shù)值,例如:

body{

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

}

font-family 字體

大多數(shù)計算機上通常只安裝了部分字體,所以選擇字體時要當心,通常指定的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;//確保表格兩個單元格中的所有內(nèi)容相對于單元格上邊對齊，默認為中間對齊,可以設(shè)置為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盒子模型-邊框常用寫法及簡寫

為元素設(shè)置邊框

要為一個元素設(shè)置邊框必須指定三個樣式

border-width:邊框的寬度

border-color:邊框顏色

border-style:邊框的樣式

和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色

可選值：

style也可以分別指定四個邊的邊框樣式，規(guī)則和width一致，

同時它也提供border-xxx-style四個樣式，來分別設(shè)置四個邊

示例:

邊框的簡寫樣式，通過它可以同時設(shè)置四個邊框的樣式，寬度，顏色

而且沒有任何的順序要求

border一指定就是同時指定四個邊不能分別指定

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

可以單獨設(shè)置四個邊的樣式，規(guī)則和border一樣，只不過它只對一個邊生效

html CSS 邊框?qū)傩詁order的邊框大小，顏色，樣式的縮寫格式！

你那樣寫的話，必須是寬度、樣式、顏色都一樣。

如果不一樣就得分開寫。

你舉得例子的正確寫法是：

{

border:1px solid;

border-color:red green blue yellow;

}

新聞標題：css邊框?qū)傩詷邮胶唽?css邊框類型
標題路徑：http://www.rwnh.cn/article28/dsdjdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、靜態(tài)網(wǎng)站、域名注冊、網(wǎng)站排名、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)