Some useful new css3 attributes and css3 attributes that you have used
Recently, css3 was launched. Although most of the css3 attributes are not supported in many popular browsers, I personally think we should try to get started with learning about and using css3 (and html5 ), because I think this is a trend, it is a standard that has been developed. I am not dedicated to front-end, but sometimes I have to write these things by myself. Sometimes I like to study these things. All the above is my personal opinion.
1. Previously I wanted to create a border box with a rounded corner on the page. It seems that I need to write a lot of css code (maybe I have no better solutions ), it is very easy to create a rounded corner with an attribute in css3. You can also create a circle with an angle set.
Border-radius:
Css code:
# Test
{
Text-align: center;
Padding: 10px 40px;
Background: gray;
Width: 350px;
Border-radius: 10px;
-Moz-border-radius: 10px;/* To make the old Firefox version support */
}
</Style>
Html code:
<Body>
<Div id = "test"> example of using border-radius as the rounded corner. </Div>
</Body>
2And CSS3 border shadow. Previously, I used images directly for background effects.Performance can also be achieved
Box-shadow:
Css code:
# Test1
{
Box-shadow: 10px 10px 5px # A5A5A5;
Width: 300px;
Height: 100px;
}
Html code:
<Body>
<Div id = "test1"> </div>
</Body>
3. css3 supports multiple background images
CSS3 multi-background image
. Box
{
Width: 464px;
Height: 300px;
Background: url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</Style>
</Head>
<Body>
<Div class = "box"> </div>
</Body>
4. The text-overflow attribute specifies what happens when a text overflow contains elements.
This attribute allows you to disable text in a container. When the text overflows, A ellipsis is provided.
. Test3 {
Text-overflow: ellipsis;
Overflow: hidden;
White-space: nowrap;
Border: 1px solid black;
Width: 400px;
Padding: 20px;
Cursor: pointer;
}
# Test3: hover {
White-space: normal;
Color: rgba (0, 0, 0, 1 );
Background: # e3e3e3;
Border: 1px solid #666;
}
</Style>
</Head>
<Body>
<Div class = "test3" id = "test3"> when the displayed content overflows, A ellipsis is displayed. Moving the cursor over the text displays all the content. </div>
</Body>
5. transition effect. With CSS3, we can add effects to elements when elements are transformed from one style to another without Flash animation or JavaScript.
The effect is hard to be reflected by textures. If you are interested, run the following code:
<Style>
Div
{
Width: 100px;
Height: 100px;
Background: blue;
Transition: width 2 s, height 2 s;
-Moz-transition: width 2 s, height 2 s,-moz-transform 2 s;/* supports Firefox 4 */
-Webkit-transition: width 2 s, height 2 s,-webkit-transform 2 s;/* supports Safari and Chrome */
-O-transition: width 2 s, height 2 s,-o-transform 2 s;/* supports Opera */
}
Div: hover
{
Width: 200px;
Height: 200px;
Transform: rotate (180deg );
-Moz-transform: rotate (180deg);/* supports Firefox 4 */
-Webkit-transform: rotate (180deg);/* supports Safari and Chrome */
-O-transform: rotate (180deg);/* supports Opera */
}
</Style>
</Head>
<Body>
<Div> place the cursor over the area to view the transition effect. </Div>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
