首頁 > web前端 > css教學 > CSS中Outlines輪廓的具體分析

CSS中Outlines輪廓的具體分析

黄舟
發布: 2017-07-27 09:15:01
原創
1939 人瀏覽過

描述:

繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用.不佔據空間.

在IE下不可用.

##outline-widththin:小於預設寬度 
屬性 描述 備註
outline 複合屬性
設定或擷取物件外的線條輪廓,外輪廓(outline)畫在邊框(border)的外面,不一定是矩形
outline:outline-color||outline-style||outline-width
outline-color 設定或擷取物件外的線條輪廓的顏色 color:顏色
invert:預設值,使用背景色的反色
outline-style 設定或擷取物件外的線條輪廓的樣式 none:預設值
dotted:點線外輪廓
dashed:虛線外輪廓
solid:實線外輪廓
double:雙線外輪廓
groove:根據outline-color的值畫3D凹槽外輪廓
ridge:根據outline-color的值畫3D凸槽外輪廓
inset:根據outline- color的值畫3D凹邊外輪廓
outset:根據outline-color的值畫3D凸邊外輪廓
##設定或檢索物件外的線條輪廓的寬度 medium:預設.預設寬度thick:大於預設寬度
length:長度

實例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <style type="text/css">

         

        span

        {

            border:solid 1px red;

            display:block;

            width:200px;

        }

         

        .span1

        {

            outline-style:dotted;

        }

         

        .span2

        {

            outline-style:dashed;

        }

         

        .span3

        {

            outline-style:groove;

        }

         

        .span4

        {

            outline-style:ridge;

        }

         

        .span5

        {

            outline-style:inset;

        }

         

        .span6

        {

            outline-style:outset;

        }

     

    </style>

</head>

<body>

    <span class="span1">111111111</span><br />

    <span class="span2">222222222</span><br />

    <span class="span3">333333333</span><br />

    <span class="span4">444444444</span><br />

    <span class="span5">555555555</span><br />

    <span class="span6">666666666</span>

</body>

</html>

登入後複製

在Firefox下效果

以上是CSS中Outlines輪廓的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板