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

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

See all articles