Home > Web Front-end > CSS Tutorial > Introduction to common properties in css3

Introduction to common properties in css3

PHPz
Release: 2017-04-02 11:00:45
Original
1315 people have browsed it

RGBA

background:rgba(0, 118, 160, .25);
Copy after login

The first three values ​​are the RGB color values ​​and the last value is the level of transparency (0 = transparent, 1 = opaque).

RBGA can be applied to any color-related properties such as font color, border color, background color, shadow color, etc.

Text Shadow text-shadow (No need to judge the browser)

text-shadow:2px 3px 2px #000;
Copy after login

The structure of the text shadow is in the following order: X-offset, Y-offset, blur, and color;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);
Copy after login

Set to a negative value, the X-Offset shadow shifts to the left. Set Offset Y to a negative value - Shifts the shadow to the top. Colors can use RGBA values.

text-shadow:0px 1px 0px #fff,0px -1px 0px #000;
Copy after login

List of text shadows (comma separated), 1px top and 1px bottom shadow.

Box-shadow box-shadow (need to determine the browser)

The structure of the box shadow is the same as that of the text shadow: respectively marked: X - Offset, Y Offset, Blur and Color.

-webkit-box-shadow:5px 5px 7px #333;
-moz-box-shadow:5px 5px 7ix #333;
Copy after login

Similarly, multiple shadow styles can be defined, separated by commas.

moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);
Copy after login

The box-shadow attribute has up to 6 parameter settings:

Shadow type: This parameter is an optional value. If no value is set, its default projection The method is outer shadow; if its unique value "inset" is taken, the outer shadow will be turned into an inner shadow. That is to say, when the shadow type is set to "inset", its projection will be an inner shadow;

X-offset : refers to the horizontal offset of the shadow. Its value can be positive or negative. If the value is positive, the shadow is on the right side of the object. Otherwise, when the value is negative, the shadow is on the left side of the object;

Y-offset: refers to the vertical offset of the shadow. Its value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object. Otherwise, when its value is negative, the shadow is at the top of the object. ;

Shadow blur radius: This parameter is optional, but its value can only be positive. If its value is 0, it means that the shadow has no blur effect. The larger the value, the smaller the edge of the shadow. The blurrier it is;

Shadow expansion radius: This parameter is optional, and its value can be positive or negative. If the value is positive, the entire shadow will be extended and expanded, otherwise if the value is negative, the shadow will be reduced

Shadow color: This parameter is optional. If no color is set, the browser will use the default color, but the default color of each browser is different, especially the safari and chrome browsers under the webkit kernel will be colorless. , that is, transparent, it is recommended not to omit this parameter.

Box border radius border-radius (need to determine the browser)

The abbreviation of border radius is similar Padding and Margin properties (eg border radius: 20 pixels).

To render the border radius in the order of the browser, use "-WebKit-" in WebKit browsers and "-moz-" in Firefox.

border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
Copy after login

You can specify a different value for each corner. Note that Firefox and Webkit Angular have different property names.

How to write "Webkit"

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-right-left-radius:45px;
Copy after login

How to write "Firefox"

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:45px;
Copy after login

The above is the detailed content of Introduction to common properties in css3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template