Lesson: lesson-box-styling

This example shows some text within a box with a rounded borders. The border of the box should be in orange and blue colors. Only Antennahouse implements the box-shadow property used in this example.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
ERROR
Download
CSS 3 property box-shadow is not supported
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
CSS 3 property box-shadow is not supported

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@import url("../styles/a5.css");

#box {
    font-size: 1.2em;
    color: red;
    width: 80%;
    top: 2cm;
    margin-top: 2cm;
    margin-left: 10%;
    margin-right: 10%;
    padding: 1em;
    border:  10px solid blue;
    border-radius: 40px;
    box-shadow: -20pt -10pt orange, 10pt 20pt silver;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div id="box">
        Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
augue.
        </div>
    </body>
</html>