HTML and CSS Reference
In-Depth Information
In addition to the single-value
form you saw in the previous
example, you can also use dif-
ferent values for each corner
of an element.
Like the
border
,
padding
, and
margin
properties, the
border-radius
prop-
erty can accept up to four values. They apply starting from the upper-
left corner and proceed clockwise around the element:
border-radius: 40px 160px 80px 120px;
Later in this chapter, you'll learn about several features in CSS3 that
provide native support for effects web authors have previously tried
to achieve with background images. There are also new features for
background images themselves. We'll look at these in the next section.
New features for background images
CSS3
offers four new features for the venerable background image: siz-
ing; multiple backgrounds on a single element; positioning relative to
the border, padding, or content; and clipping according to the border,
padding, or content. In this section, you'll learn about each of these
new features.
Background size
Background images are intended to be
used purely for decoration, whereas
images placed in
HTML
are supposed to
mean something—this is the same separa-
tion-of-concerns principal that's been dis-
cussed in several previous chapters. But
images placed in the markup have certain
practical advantages that can discourage
web authors from doing the right thing.
Standard
Prefixed
7.0
5.0
4.0
3.6
9.0
-
10.5
10.10
5.0
3.0
