Shulou(Shulou.com)06/03 Report--

Editor to share with you what the front-end must master the attributes of CSS3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Border-radius

Border-radius is the most popular of a host of CSS3 attributes, and border-radius is the highest-level attribute in CSS3. When designers are afraid that a layer will be displayed in different ways between different browsers, CSS rounded corners, a very rudimentary knowledge, will guide them to learn. Our idea of providing a backup viewing experience for mobile browsers is very good. Oddly enough, when this approach appears on desktop browsers, they don't think so. Border-radius is the most popular of a host of CSS3 attributes, and border-radius is the highest-level attribute in CSS3. When designers are afraid that a layer will be displayed in different ways between different browsers, CSS rounded corners, a very rudimentary knowledge, will guide them to learn. Our idea of providing a backup viewing experience for mobile browsers is very good. Oddly enough, when this approach appears on desktop browsers, they don't think so.

-webkit-border-radius: 4px

-moz-border-radius: 4px

Border-radius: 4px

Many readers may not realize that we can use this attribute to make a circle.

-moz-border-radius: 50px

-webkit-border-radius: 50px

Border-radius: 50px

2. Box-shadow

Then there is the very common Box-shadow, which can beautify your elements immediately, just remember not to set the value too far.

-webkit-box-shadow: 1px 1px 3px # 292929

-moz-box-shadow: 1px 1px 3px # 292929

Box-shadow: four parameters of 1px 1px 3px # 292929

1.x-offset x axis offset

2.y-offset y-axis offset

3.blur fuzzy value

4.color of shadow Shadow Color

Now, many people don't know that you can use more than one box-shadows at a time, and doing so can have some interesting effects. In the following image, I use blue and green shadows to enlarge the effect.

Box-shadow

-webkit-box-shadow: 1px 1px 3px green,-1px-1px blue

-moz-box-shadow: 1px 1px 3px green,-1px-1px blue

Box-shadow: 1px 1px 3px green,-1px-1px blue

Clever Shadows

The CSS

.box: after {

Content:''

Position: absolute

Z-index:-1; / * hide shadow behind image * /

/ * The Shadow * /

-webkit-box-shadow: 0 15px 20px rgba (0,0,0,0.3)

-moz-box-shadow: 0 15px 20px rgba (0,0,0,0.3)

-box-shadow: 0 15px 20px rgba (0,0,0,0.3)

Width: 70%

Left: 15%; / * one half of the remaining 30% (see width above) * /

Height: 100px

Bottom: 0

}

3. Text-shadow

Text-shadow is one of several CSS attributes that we can omit the prefix, and similarly box-shadow, which must be applied to the text, and they have the same four parameters:

1.x-offset horizontal displacement

2.y-offest vertical displacement

3.blur fuzzy value

4.color of shadow Shadow Color

H2 {

Text-shadow: 0 1px 0 white

Color: # 292929

}

Text-Outline, like box-shadow, can set multiple shadows by comma delimiters. For example, we create the outline of the text box, and when Webkit does not support stroke effects, we can use the following code to get more browsers to support it (though not very beautiful).

4. Text-Stroke

Note that only Webkit (Safari, Chrome, iPhone) supports this property in the last few years when using this method. In fact, although I may be wrong, Text-stroke is not yet part of the CSS3 category. In this case, Firefox displays a blank page when using a white font. To solve this problem, you can use either Javascript or a text color that is different from the background color.

H2 {

-webkit-text-stroke: 3px black

Color: white

}

Feature Detection

How do we provide a set of available styles for firefox and another set of Safari or Chrome? The solution is to do more tests. With feature detection, we can use JavaScript to test whether a property is available, and if not, I can use a backup one. Going back to the issue of text-stroke, set an alternate black for browsers that do not support this property (except for webkit currently).

Var H2 = document.createElement ('H2')

If (! ('webkitTextStroke' in h2.style)) {

Var heading = document.getElementsByTagName ('h2') [0]

Heading.style.color = 'black'

}

First we set an H2 element, then execute it, through the style attribute to determine

-webkit-text-stroke

Whether this element is supported. If not, we will set the title from white to black.

5. Multiple Backgrounds

The Background attribute has been revolutionized in the CSS3 style to support multi-background images. To take a simple example, if there is no suitable image, we will use the image of the two tutorials as our background, of course, you may use texture or gradient as the image in the program.

.box {

Background: url (image/path.jpg) 0 0 no-repeat

Url (image2/path.jpg) 100% no-repeat

}

Above, two background images are inserted through the comma separator. The first is positioned (0mem0) and the second is positioned (100%). Make sure you use an alternate image for an unsupported browser, otherwise it will skip this property and leave the background image blank. The compensation for the old browser is to add a separate image to the old browser, such as IE7. Define the background twice, one for the old browser and the other for rewriting. Or you can check Modernizr again.

.box {

/ * fallback * /

Background: url (image/path.jpg) no-repeat

/ * modern browsers * /

Background: url (image/path.jpg) 0 0 no-repeat

Url (image2/path.jpg) 100% no-repeat

}

6. Background-size

At present, we can use this more flexible way to resize the background image.

Background: url (path/to/image.jpg) no-repeat

Background-size: 100%

The above code makes the background image occupy the entire available space. But what if we use a special image to occupy the entire space of the body element, no matter how wide the window is?

Body, html {height: 100%;}

Body {

Background: url (path/to/image.jpg) no-repeat

Background-size: 100%

}

Yes, that's the way to do it, defining the xpene y parameter of background-size, respectively. The latest versions of Chrome and Safari support this attribute, but we still need to support old browsers in the old way.

Body {

Background: url (path/to/image.jpg) no-repeat

-moz-background-size: 100%

-o-background-size: 100%

-webkit-background-size: 100%

Background-size: 100%

}

7. Text-overflow

The browser initially developed the text overflow property to set two values: clip ellipsis this property supports cutting off the text in the container and also gives an ellipsis feature.

Text-overflow

.box {

-o-text-overflow: ellipsis

Text-overflow:ellipsis

Overflow:hidden

White-space:nowrap

Border: 1px solid black

Width: 400px

Padding: 20px

Cursor: pointer

}

You might consider displaying the full text when the mouse passes over.

# box:hover {

White-space: normal

Color: rgba (0re0j0j0pl 1)

Background: # e3e3e3

Border: 1px solid # 666

}

Oddly enough, this doesn't look like resetting the text-overflow property or disabling it to take effect, in on:hover we can make the normal property of white-space. It's normal now. Do you know? You can also specify your own string and use the location of the ellipsis. Do this to modify the text string to be displayed.

8. Flexible Box Model

Flexible Box Model will eventually keep us away from float-like troubles. Although it is to give your head a new attribute, but once you do so, you will benefit for life. Do a demonstration to create a simple two-column layout.

Main content here

Aside content here

First we need to set a container, and then specify its width and height, even if there is no substantive content in it.

# container {

Width: 960px

Height: 500px; / * just for demo * /

Background: # e3e3e3

Margin: auto

Display:-moz-box

Display:-webkit-box

Display: box;}

Next, define the background colors of # main and aside, respectively

# main {

Background: yellow

}

Aside {

Background: red

}

So far, we haven't seen any effect.

It is worth mentioning that although we set up the display:box model, its child elements occupy the entire vertical space. This is its default box-align property, stretch. See what happens when we set the width of # main.

# main {background: yellow; width: 800px;}

Flexible Box Model

But we still have a question: why doesn't aside take up all the remaining space? We can try it with the new attribute box-flex. Box-flex allows elements to occupy the entire space.

Aside {display: block; / * cause is HTML5 element * / background: red; / * take up all available space * /-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;}

After using this property, aside will occupy the entire available space no matter how wide # main is. At the same time, you don't have to worry about problems such as float, such as pushing elements to the next line.

Flexible Box Model

I am only superficial here to say that please refer to the details of Paul's excellent article in Ireland. However, when using this method, you should also pay attention to compatibility issues, such as older browsers should be tested first and provide the necessary comments.

9. Resize

Only Firefox 4 and Safari 3 support this attribute. Resize is part of the CSS3 UI model and can be used to redefine the size of the textarea.

By default, webkit browsers and Firefox 4 support redefinitions in both horizontal and vertical directions.

Textarea {

-moz-resize: vertical

-webkit-resize: vertical

Resize: vertical

}

Possible values:

1.both: redefine horizontal and vertical orientation

2.horizontal: horizontal resizing limit

3.vertical: vertical resizing limit

None: redefinition is not supported

10 、 Transition

Perhaps the most exciting addition to CSS3 is to animate without JavaScript elements. It seems that IE9 doesn't support this feature yet, but that doesn't mean you can't use it. The key is to improve your skills. Now mimic an effect in which the text slides to the right as the mouse rolls over the right link.

The HTML

Hover Over Me

The CSS

Ul a {- webkit-transition: padding .4s;-moz-transition: padding .4s;-o-transition: padding .4s; transition: padding .4s;} a:hover {padding-left: 6px;}

Transition has three parameters:

The property to transition. (Set this value to all if needed) transform properties. (set this value to all if necessary)

The duration duration

The easing type slow type

Why don't we apply transition directly to hover? Because we only take effect on mouseover, when mouseout, the element will immediately return to its original state. Because we have adjusted the effect, all will not have any effect on the old browser.

The above is all the content of this article "what are the attributes of CSS3 that the front end must master?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.