Home >Web Front-end >CSS Tutorial >Share some commonly used latest css3 properties
Share some commonly used latest css3 properties
- Y2JOriginal
- 2017-05-23 10:52:122180browse
Here are 4 new properties of CSS3 recommended to you. They are very practical. Examples are attached. Friends in need can study them carefully. When working on projects,
css3 has just been launched. Although most css3 properties are not supported in many popular browsers, I personally feel that we should try our best to slowly start to understand and use css3 ( And html5), because I think this is a trend and it is a standard that has been developed. I am not specifically doing front-end work, I just sometimes have to write these things myself, and sometimes I like to study them. All the above are just my personal opinions.
1. Before, I wanted to make a rounded frame with a border on the page. It seemed that I needed to write a lot of css code (maybe I didn’t know a better way). There was an attribute created in css3. Rounding corners is very easy. You can also create a circle by setting the angle
border-radius：
css Code:
The code is as follows:
#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}html code:
The code is as follows:
<body> <p>border-radius 做圆角的例子。</p> </body>
2. CSS3 border Shadow, before I used picture directly to achieve the effect of background. I can also use the box-shadow attribute in css3 to achieve
box-shadow:
css code:
The code is as follows:
#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}html code:
The code is as follows:
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
3. CSS3 supports background images. Use multiple images
CSS3 multiple background images
##The code is as follows:
.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</style>
</head>
<body>
<p></p>
</body>
4,
text-overflow attribute specifies what happens when text overflows the containing element.
This property supports the feature of cutting off the text in the container and giving an ellipsis when the text overflows.
<em>.test3 {<br/>text-overflow:ellipsis;<br/>overflow:hidden;<br/>white-space<br/>:nowrap;<br/>border: 1px solid black;<br/>width: 400px;<br/>padding: 20px;<br/>cursor: pointer;<br/>}<br/>#test3<br/>:hover<br/> {<br/>white-space: normal;<br/>color: rgba(0,0,0,1);<br/>background: #e3e3e3;<br/>border: 1px solid #666;<br/>}<br/></style><br/></head><br/><body><br/><p>当这里显示的内容溢出是会有省略号，鼠标移到文本上面会显示所有内容</p><br/></body><br/></em>
5, Transition effect
, through CSS3, we can change the element from Adds effects to elements when one style transforms into another. The effect is difficult to express with textures. If you are interested in running the following code yourself: The code is as follows:
<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-trans
for
m 2s; /* 可以支持Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* 可以支持Safari and
Chr
ome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* 可以支持Opera */
}
p:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
-webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
-o-transform:rotate(180deg); /* 可以支持Opera */
}
</style>
</head>
<body>
<p>把鼠标放上该区域，来查看过渡效果。</p>
</body>[Related recommendations]
1.
CSS3 Free Video Tutorial2.
Use CSS to create chat box small sharp corners and bubble effectsBrowser implements high-performance css3 animation on mobile terminalh5+css3 code example to implement image fly-in and fade-in and fade-out effectsTeach you how to use CSS3 to create 8 types of Loading animationsThe above is the detailed content of Share some commonly used latest css3 properties. For more information, please follow other related articles on the PHP Chinese website!