第05章-CSS3排版屬性

2022-05-18 23:32 更新

第05章-前端核心技術(shù)-CSS3排版屬性

項目經(jīng)理(作者)：張明星

學(xué)習(xí)目標(biāo)

  1. 掌握無序列表的應(yīng)用
  2. 掌握有序列表
  3. 熟悉嵌套列表的使用方法
  4. 了解自定義列表的標(biāo)記
  5. 掌握表格樣式的使用
  6. 掌握CSS邊框、邊線、邊距等屬性 重點
  7. 掌握邊框的擴展運用 重點 難點
  8. 掌握內(nèi)邊距和邊框的合并方法 重點 難點
  9. 掌握CSS盒子模型原理
  10. 掌握外邊距合并的方法 重點 難點

CSS 列表

CSS有序列表和無序列表屬性

屬性 描述
list-style 簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個聲明中
list-style-image 將圖象設(shè)置為列表項標(biāo)志。（url('sqpurple.gif')）
list-style-position 設(shè)置列表中列表項標(biāo)志的位置。（inside| outside）
list-style-type 設(shè)置列表項標(biāo)志的類型。如下表

列表屬性可以簡寫，按照如下順序

  1. list-style-type
  2. list-style-position
  3. list-style-image

如果上述值丟失一個，其余仍在指定的順序，就沒關(guān)系。如：

ul {
    list-style: square inside url("sqpurple.gif"); 
}

案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a{
                text-decoration: none;
            }
            ul li{
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            ul li:hover{
                background-color: darkcyan;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">系統(tǒng)管理</a></li>
            <li><a href="">會員管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">訂單管理</a></li>
        </ul>
    </body>
</html>

效果展示

list-style-type 屬性設(shè)置列表項標(biāo)記的類型參考

值 描述
none 無標(biāo)記。
disc 默認(rèn)。標(biāo)記是實心圓。
circle 標(biāo)記是空心圓。
square 標(biāo)記是實心方塊。
decimal 標(biāo)記是數(shù)字。
decimal-leading-zero 0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數(shù)字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統(tǒng)的希伯來編號方式
armenian 傳統(tǒng)的亞美尼亞編號方式
georgian 傳統(tǒng)的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數(shù)字
hiragana 標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 標(biāo)記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 標(biāo)記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS 隱藏

顯示控制常用的屬性有display、visibility、opacity

隱藏元素

屬性 顯示 隱藏 特征
display 除了none之外的其他值 none 隱藏的元素不會占用任何空間，消失
visibility visible hidden 隱藏的元素仍需占用與未隱藏之前一樣的空間，僅不可見
opacity 1 0 隱藏的元素只是變透明，僅不可見

下拉菜單

前面我們知道超鏈接a標(biāo)簽具有hover和active狀態(tài)屬性，其實這兩個屬性并不是超鏈接a標(biāo)簽專屬，任何一個標(biāo)簽都具有這兩個屬性，因此，可以利用這兩個屬性來制作下拉菜單。

案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
                padding: 0;/*清除內(nèi)邊距*/
            }
            li{
                width: 200px;
            }
            a{
                text-decoration: none;
            }
            #menu1 li a{
                display: block;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            #menu1 li a:hover{
                background-color: darkcyan;
                color: white;
            }
            #menu1 li:hover #menu2{
                display: block;
            }

            
            #menu2 {
                display: none;
            }
            #menu2 li a{
                display: block;
                height: 50px;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blueviolet;
                font-weight: bold;
                background-color: darkgrey;
            }
            #menu2 li a:hover{
                background-color: crimson;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul id="menu1">
            <li>
                <a href="">系統(tǒng)管理</a>
                <ul id="menu2">
                    <li><a href="">系統(tǒng)參數(shù)</a></li>
                    <li><a href="">系統(tǒng)設(shè)置</a></li>
                    <li><a href="">系統(tǒng)版本</a></li>
                    <li><a href="">系統(tǒng)更新</a></li>
                </ul>
            </li>
            <li><a href="">會員管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">訂單管理</a></li>
        </ul>
    </body>
</html>

效果圖

CSS 顯示屬性

display主要用的CSS樣式有以下三個：

屬性 描述
display:block 顯示為塊級元素
display:inline 顯示為內(nèi)聯(lián)元素
display:inline-block 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性

常將<li>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。

塊級元素(block)特性：

  1. 總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;

  1. 寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

內(nèi)聯(lián)元素(inline)特性：

  1. 和相鄰的內(nèi)聯(lián)元素在同一行;

  1. 寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;

/* display: inline-block; */
/* 1.同行顯示，并且可以設(shè)置寬高 */
/* 2.默認(rèn)會產(chǎn)生間距，去間距：上級【font-size: 0px;】，所有下級【font-size: XXpx;】*
/* 3.文字基準(zhǔn)線導(dǎo)致錯開，解決方案：所有下級【vertical-align: top;】 */

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a{
                text-decoration: none;
            }
            ul li{
                display: inline-block;
                line-height: 50px;
                width: 200px;
                letter-spacing: 5px;
                text-indent: 8px;
                font-size: 18px;
                color: blue;
                font-weight: bold;
                background-color: bisque;
            }
            ul li:hover{
                background-color: darkcyan;
                color: white;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">系統(tǒng)管理</a></li>
            <li><a href="">會員管理</a></li>
            <li><a href="">商品管理</a></li>
            <li><a href="">訂單管理</a></li>
        </ul>
    </body>
</html>

效果圖

CSS 表格

caption-side屬性。

注意：IE8只有指定!DOCTYPE才支持caption-side屬性。

值 描述
top 默認(rèn)值。把表格標(biāo)題定位在表格之上。
bottom 把表格標(biāo)題定位在表格之下。

表格邊框?qū)傩?/p>

值 描述
border 表格邊框：border: 1px solid black;

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個表格的th和td元素的黑色邊框：

table, th, td{
    border: 1px solid black;
}

但是表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。

為了顯示一個表的單個邊框，使用 border-collapse屬性。

border-collapse屬性折疊邊框

值 描述
border-collapse 表格邊框合并：border-collapse: collapse;

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個單一的邊框或隔開：

table {
    /*合并表格與單元格之間的間距*/   
    border-collapse: collapse;
}
table,th,td {
    border: 1px solid black;
}

案例04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #table1,
            th,
            td {
                border: 1px solid black;
            }
            #table2,
            #table2 th,
            #table2 td {
                border-collapse:collapse;
                border: 1px solid black;
                width:50%;
                height:30px;
                text-align:right;
                vertical-align:bottom;
                padding:15px;
                background-color:green;
                color:white;
            }
        </style>
    </head>
    <body>
        <table id="table1">
            <caption>表格一</caption>
            <tr>
                <th>表頭</th>
                <th>表頭</th>
            </tr>
            <tr>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
        </table>
        <table id="table2">
            <caption>表格二</caption>
            <tr>
                <th>表頭</th>
                <th>表頭</th>
            </tr>
            <tr>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
        </table>
    </body>
</html>

效果圖

表格寬度和高度

值 描述
width 表格寬度：表格、單元格
height 表格高度：表格、行、單元格

下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：

table {
    width:100%;
}
th{
    height:50px;
}

表格內(nèi)文字對齊

值 描述
text-align 單元格內(nèi)容水平對其：
vertical-align 單元格內(nèi)容垂直對其：

表格中的文本對齊和垂直對齊屬性。

text-align屬性設(shè)置水平對齊方式，像左，右，或中心：

td{
    text-align:right;
}

vertical-align垂直對齊屬性設(shè)置垂直對齊，比如頂部，底部或中間：

td{
    height:50px;
    vertical-align:bottom;
}

表格隔行色

實現(xiàn)表格隔行色的方法有很多，如

值 描述
:nth-of-type(odd) 基數(shù)
:nth-of-type(even) 偶數(shù)
:nth-child (odd) 基數(shù)
:nth-child (even) 偶數(shù)
:nth-child (2n+1) 基數(shù)
:nth-child (2n) 偶數(shù)

如：

td:nth-of-type(odd){ background:#00ccff;}奇數(shù)行 
td:nth-of-type(even){ background:#ffcc00;}偶數(shù)行 


td:nth-child (odd){ background:#00ccff;}奇數(shù)行 
td:nth-child (even){ background:#ffcc00;}偶數(shù)行


td:nth-child (2n+1){ background:#00ccff;}奇數(shù)行 
td:nth-child (2n){ background:#ffcc00;}偶數(shù)行

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                width: 80%;
                text-align: center;
                border-collapse: collapse;
            }
            th,td{
                height: 35px;
                color: white;
            }
            tr:nth-of-type(odd){
                background-color: #5F9EA0;
            }
            tr:nth-of-type(even){
                background-color: darkolivegreen;
            }
            td:nth-child(3n+3){
                background-color: #A52A2A;
            }
        </style>
    </head>
    <body>
        <table border="0" align="center">
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
                <th>身高</th>
                <th>體重</th>
                <th>簽名</th>
            </tr>
            <tr>
                <td>1</td>
                <td>劉亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那時覺得看哈數(shù)據(jù)庫的</td>
            </tr>
            <tr>
                <td>2</td>
                <td>劉亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那時覺得看哈數(shù)據(jù)庫的</td>
            </tr>
            <tr>
                <td>3</td>
                <td>劉亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那時覺得看哈數(shù)據(jù)庫的</td>
            </tr>
            <tr>
                <td>4</td>
                <td>劉亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那時覺得看哈數(shù)據(jù)庫的</td>
            </tr>
            <tr>
                <td>5</td>
                <td>劉亦菲</td>
                <td>女</td>
                <td>32</td>
                <td>168CM</td>
                <td>50kg</td>
                <td>那時覺得看哈數(shù)據(jù)庫的</td>
            </tr>
        </table>
    </body>
</html>

效果圖

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。

CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。

下面的圖片說明了盒子模型(Box Model)：

不同部分的說明：

  • outline(輪廓) - 是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
  • margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
  • border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
  • padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
  • content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

padding(填充)

padding（填充）屬性定義元素邊框與元素內(nèi)容之間的空間

屬性 說明
padding 使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性
padding-bottom 設(shè)置元素的底部填充
padding-left 設(shè)置元素的左部填充
padding-right 設(shè)置元素的右部填充
padding-top 設(shè)置元素的頂部填充

填充- 單邊內(nèi)邊距屬性

在CSS中，它可以指定不同的側(cè)面不同的填充：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

填充 - 簡寫屬性

padding:25px;

  • 所有的填充都是25px

padding:25px 50px;

  • 上下填充為25px
  • 左右填充為50px

padding:25px 50px 75px;

  • 上填充為25px
  • 左右填充為50px
  • 下填充為75px

 padding:25px 50px 75px 100px;

  • 上填充為25px
  • 右填充為50px
  • 下填充為75px
  • 左填充為100px

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .content{
                padding: 80px 10% 100px;
                background-color: rgba(0,0,0,0.1);
            }
        </style>
    </head>
    <body>
        <div class="content">
            <h1>歡迎您</h1>
            <p>這是一個神奇的網(wǎng)站</p>
        </div>
    </body>
</html>

效果展示

border(邊框)

CSS 邊框?qū)傩?/p>

屬性 描述
border 簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。
border-style 用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。
border-width 簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。
border-color 簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色。
border-bottom 簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。
border-bottom-color 設(shè)置元素的下邊框的顏色。
border-bottom-style 設(shè)置元素的下邊框的樣式。
border-bottom-width 設(shè)置元素的下邊框的寬度。
border-left 簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。
border-left-color 設(shè)置元素的左邊框的顏色。
border-left-style 設(shè)置元素的左邊框的樣式。
border-left-width 設(shè)置元素的左邊框的寬度。
border-right 簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。
border-right-color 設(shè)置元素的右邊框的顏色。
border-right-style 設(shè)置元素的右邊框的樣式。
border-right-width 設(shè)置元素的右邊框的寬度。
border-top 簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。
border-top-color 設(shè)置元素的上邊框的顏色。
border-top-style 設(shè)置元素的上邊框的樣式。
border-top-width 設(shè)置元素的上邊框的寬度。

border-style屬性值

值 描述
none 默認(rèn)。無輪廓。
dotted 點狀的輪廓。
dashed 虛線輪廓。
solid 實線輪廓。
double 雙線輪廓。雙線的寬度等同于 outline-width 的值。
groove 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge 3D 凸槽輪廓。此效果取決于 outline-color 值。
inset 3D 凹邊輪廓。此效果取決于 outline-color 值。
outset 3D 凸邊輪廓。此效果取決于 outline-color 值。
inherit 規(guī)定應(yīng)該從父元素繼承輪廓樣式的設(shè)置。

類型和輪廓是一樣的

border-radius 屬性

語法

border-radius: 左上角 右上角 右下角 左下角;

注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值 描述
length 定義彎道的形狀。
% 使用%定義角落的形狀。

box-sizing屬性

語法：

box-sizing: content-box|border-box|inherit:
值 說明
content-box 指定元素的寬度和高度不包含元素的padding和border
border-box 指定元素的寬度和高度包含元素的padding和border

案例07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>邊框</title>
        <style>
            .none {
                border-style: none;
            }
            .dotted {
                border-style: dotted;
            }
            .dashed {
                border-style: dashed;
            }
            .solid {
                border-style: solid;
            }
            .double {
                border-style: double;
            }
            .groove {
                border-style: groove;
            }
            .ridge {
                border-style: ridge;
            }
            .inset {
                border-style: inset;
            }
            .outset {
                border-style: outset;
            }
            .hidden {
                border-style: hidden;
            }
        </style>
    </head>
    <body>
        <p class="none">無邊框。</p>
        <p class="dotted">虛線邊框。</p>
        <p class="dashed">虛線邊框。</p>
        <p class="solid">實線邊框。</p>
        <p class="double">雙邊框。</p>
        <p class="groove"> 凹槽邊框。</p>
        <p class="ridge">壟狀邊框。</p>
        <p class="inset">嵌入邊框。</p>
        <p class="outset">外凸邊框。</p>
        <p class="hidden">隱藏邊框。</p>
    </body>
</html>

效果展示

outline(輪廓)

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。

屬性 說明
outline 在一個聲明中設(shè)置所有的輪廓屬性
outline-color 設(shè)置輪廓的顏色
outline-style 設(shè)置輪廓的樣式
outline-width 設(shè)置輪廓的寬度

outline-style屬性值

值 描述
none 默認(rèn)。無輪廓。
dotted 點狀的輪廓。
dashed 虛線輪廓。
solid 實線輪廓。
double 雙線輪廓。雙線的寬度等同于 outline-width 的值。
groove 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge 3D 凸槽輪廓。此效果取決于 outline-color 值。
inset 3D 凹邊輪廓。此效果取決于 outline-color 值。
outset 3D 凸邊輪廓。此效果取決于 outline-color 值。
inherit 規(guī)定應(yīng)該從父元素繼承輪廓樣式的設(shè)置。

案例08

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <title>邊框</title>
        <style>
            p {
                border: 1px solid red;
            }
            .dotted {
                outline-style: dotted;
            }
            .dashed {
                outline-style: dashed;
            }
            .solid {
                outline-style: solid;
            }
            .double {
                outline-style: double;
            }
            .groove {
                outline-style: groove;
            }
            .ridge {
                outline-style: ridge;
            }
            .inset {
                outline-style: inset;
            }
            .outset {
                outline-style: outset;
            }
        </style>
    </head>
    <body>
        <p class="dotted">點線輪廓</p>
        <p class="dashed">虛線輪廓</p>
        <p class="solid">實線輪廓</p>
        <p class="double">雙線輪廓</p>
        <p class="groove">凹槽輪廓</p>
        <p class="ridge">壟狀輪廓</p>
        <p class="inset">嵌入輪廓</p>
        <p class="outset">外凸輪廓</p>
    </body>
</html>

效果圖

margin(外邊距)

margin(外邊距)屬性定義元素周圍的空間。

屬性 描述
margin 簡寫屬性。在一個聲明中設(shè)置所有外邊距屬性。
margin-bottom 設(shè)置元素的下外邊距。
margin-left 設(shè)置元素的左外邊距。
margin-right 設(shè)置元素的右外邊距。
margin-top 設(shè)置元素的上外邊距。

margin清除周圍的元素（外邊框）的區(qū)域。margin沒有背景顏色，是完全透明的

margin可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。

值 說明
auto 設(shè)置瀏覽器邊距。 這樣做的結(jié)果會依賴于瀏覽器
length 定義一個固定的margin（使用像素，pt，em等）
% 定義一個使用百分比的邊距

Margin - 單邊外邊距屬性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - 簡寫屬性

為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的縮寫屬性。

margin:25px;

  • 所有的4個邊距都是25px

margin:25px 50px;

  • 上下邊距為25px
  • 左右邊距為50px

margin:25px 50px 75px;

  • 上邊距為25px
  • 左右邊距為50px
  • 下邊距為75px

margin:25px 50px 75px 100px;

  • 上邊距為25px
  • 右邊距為50px
  • 下邊距為75px
  • 左邊距為100px

外邊距合并

  1. 當(dāng)子元素的頂部和父元素的頂部僅僅貼在一起（既：中間沒有相隔的內(nèi)容）時，子元素的頂部外邊距會和父元素的外邊距合并，最終變成父元素的外邊距。
    1. 解決方法一：在父元素和子元素之間插入一個br標(biāo)簽
    2. 解決方法二：給父元素加padding:0.1px;
    3. 解決方法三：把子元素的margin-top用padding-top來代替

  1. 同級的相鄰兄弟元素，上一個兄弟元素的底部外邊距和下一個元素的頂部外邊距會合并，最終兩元素之間的外邊距不是相加，而是變成兩個元素中外邊距的最大值

案例09

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 盒子模型</title>
    </head>
    <style type="text/css">
        #box{
            text-align: center;
            background-color: gray;
            color: wheat;
            margin: 30px;
            outline: 30px solid #FF0000;
            border: 30px solid #8A2BE2;
            padding: 30px;
            width: 80px;
            height: 80px;
            font-size: 30px;
        }
        #content{
            border: 1px solid black;
        }
    </style>
    <body>
        <div id="box">
            <div id="content">
                盒子模型
            </div>
        </div>
    </body>
</html>

效果圖

CSS3 box-shadow陰影

語法

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

注意：box-shadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

值 說明
h-shadow 必需的。水平陰影的位置。允許負(fù)值
v-shadow 必需的。垂直陰影的位置。允許負(fù)值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。
inset 可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

案例11

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 30px;
                background-color: #E9E9E9;
            }
            .polaroid {
                width: 394px;
                padding: 10px 10px 20px 10px;
                border: 1px solid #BFBFBF;
                background-color: white;
                /* Add box-shadow */
                box-shadow: 2px 2px 3px #aaaaaa;
            }
        </style>
    </head>
    <body>
        <div class="polaroid">
            <p class="caption">上海鮮花港的郁金香，花名：Ballade Dream。</p>
        </div>
    </body>
</html>

效果圖

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號