Home >Web Front-end >CSS Tutorial >Some little knowledge about CSS3

Some little knowledge about CSS3

零到壹度Original: 2018-03-21 11:42:051156browse

This article mainly talks about some little knowledge about CSS3 with you, I hope it can help you. Let’s take a look with the editor below.

box-shadow adds a shadow to the p element
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: required . The position of the horizontal shadow. Negative values allowed
v-shadow: Required. The position of the vertical shadow. Allow negative values
blur: Optional. Fuzzy distance
spread: Optional. The size of the shadow
color is optional. The color of the shadow. Find the full list of color values in CSS Color Values
inset Optional. Change the inner shadow of the shadow from the outer shadow (at the beginning)
2.transform: Rotate p element
Compatibility issue:
-ms-transform:rotate(7deg); / * IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
3.transition: Please move the mouse pointer to the blue p element to see the transition effect.
ad846d1ec8764448f5d4e08a5ccc7b3fPlease move the mouse pointer to the blue p element to see the transition effect. 94b3e26ee717c64999d7867364b1b4a3
```
!DOCTYPE html>
<html>
<head>
<style> 
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>
```
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Note: 0d36329ec37a2cc24d42c7229b69747aThis example does not work in Internet Explorer. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

The above is the detailed content of Some little knowledge about CSS3. 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

Previous article：Create a "Loading" prompt box with CSSNext article：Create a "Loading" prompt box with CSS

See more

Some little knowledge about CSS3

Related articles