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

Home

Web Front-end

CSS Tutorial

Share some commonly used latest css3 properties

Y2J

May 23, 2017 am 10:52 AM

css3

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:

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.

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>

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]

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Draggin' and Droppin' in ReactApr 17, 2025 am 11:52 AM

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd,

Fast SoftwareApr 17, 2025 am 11:49 AM

There have been some wonderfully interconnected things about fast software lately.

Nested Gradients with background-clipApr 17, 2025 am 11:47 AM

I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis,

Using requestAnimationFrame with React HooksApr 17, 2025 am 11:46 AM

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things

Need to scroll to the top of the page?Apr 17, 2025 am 11:45 AM

Perhaps the easiest way to offer that to the user is a link that targets an ID on the element. So like...

The Best (GraphQL) API is One You WriteApr 17, 2025 am 11:36 AM

Listen, I am no GraphQL expert but I do enjoy working with it. The way it exposes data to me as a front-end developer is pretty cool. It's like a menu of

Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading IndicatorApr 17, 2025 am 11:26 AM

In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's

Various Methods for Expanding a Box While Preserving the Border RadiusApr 17, 2025 am 11:19 AM

I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.

See all articles