CSS outline

The properties involved are:

outline Set all outline properties in one statement.

outline-color Set the color of the outline.

outline-style Set the style of the outline.

outline-width Set the width of the outline.

In order to demonstrate, we first add two p tags to the original html:

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

Then add the specific settings of these attributes in CSS. The setting parameters will not be elaborated too much:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        p.one
        {
            border:red solid thin;
            outline-style:solid;
            outline-width:thin;
        }
        p.two
        {
            border:red solid thin;
            outline-style:dotted;
            outline-width:3px;
        }
    </style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-width 属性。</p>
</body>
</html>

The following is the rendering:

QQ截图20161011153145.png

CSS border property

in the "CSS" column The number indicates which CSS version defines the property.

QQ截图20161011153154.png

Continuing Learning

new file

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
    -transitional.dtd">
<html>
<head>
 <style type="text/css">
 p.one
 {
 border:red solid thin;
 outline-style:solid;
 outline-width:thin;
 }
 p.two
 {
 border:red solid thin;
 outline-style:dotted;
 outline-width:3px;
 }
 </style>
</head>
<body>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-width 属性。</p
    >
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX