Share some commonly used latest css3 properties-CSS Tutorial-php.cn

Share some commonly used latest css3 properties

Y2J

Release： 2017-05-23 10:52:12

Original

2146 people have browsed it

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版本支持 */
}

Copy after login

html code:

The code is as follows:

<body>
<p>border-radius 做圆角的例子。</p>
</body>

Copy after login

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;
}

Copy after login

html code:

The code is as follows:

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>

Copy after login

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.

The code is as follows:

<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>

Copy after login

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>

Copy after login

[Related recommendations]

CSS3 Free Video Tutorial

Use CSS to create chat box small sharp corners and bubble effects

3 .

Browser implements high-performance css3 animation on mobile terminal

h5+css3 code example to implement image fly-in and fade-in and fade-out effects

Teach you how to use CSS3 to create 8 types of Loading animations

The 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!