What new attribute styles are added to css3? Introduction to commonly used new features of css3

What are the new attribute styles (new features) of css3? This chapter will focus on introducing several new attribute styles (new features) commonly used in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Before introducing the new attribute styles (new features) of CSS3, we must first know what CSS3 is.

CSS is the abbreviation of Cascading Style Sheets.
CSS is a markup language that is a browser interpreted language and can be executed directly by the browser without compilation.
CSS is a markup language used to represent HTML or XML.
CSS is recommended and maintained by the W3C CSS Working Group.
CSS is a required course for beginners in programming. Using CSS styles can make the page beautiful.
CSS syntax consists of three parts: selector, property and value, for example: selector {property: value}.

CSS3 is the latest CSS standard. It adds some new attribute styles, which are new features. Below we will introduce several commonly used new features (attribute styles) in css3:

1. Border

border-image Attribute : It is a shorthand attribute, used to set the shorthand attribute of all border-image-* attributes.

border-radius attribute: It is a shorthand attribute used to set four border-*-radius attributes.

border-top-left-radius Set the upper left corner
border-top-right-radius Set the upper right corner
border-bottom-right-radius Set the lower left corner
border-bottom-right -radius Set the lower right corner
border-top-left-radius: x y; x represents the x-axis offset of the upper left corner, y represents the y-axis offset, and you can set percentages and pixels.

border-radius:;
One value represents upper left, upper right, lower left and lower right, all are
Two values ​​represent the first value upper left and lower right The second value represents upper right and lower left
The three values ​​represent: the first one is upper left, the second value is upper right and lower left, the third value is lower right
, the four are respectively upper left, upper right, lower right and lower left.

border-radius 0 0 0 0/ 0 0 0 0；
The first four are the x-axis offsets in the four x-directions and the last four are the offsets in the y-axis direction

box-shadow property: Add one or more shadows to the box.

Syntax: box-shadow: value
Value description:
(1) The first value: Npx, the shadow is offset by N pixels in the horizontal direction, positive numbers go to the right, negative numbers go to the left
(2) The second value: Npx, the shadow is offset by N pixels in the vertical direction, positive numbers go down, negative numbers go up
(3) The third value: feather size (blurred size)
(4) The fourth value: shadow size
(5) The fifth value: color. The default value is black
(6) The sixth parameter: inner and outer shadow. The default is outer shadow. The inner shadow is inset
. (7) You can write multiple shadows, separated by commas
(8) The shadow can be abbreviated, but it should be noted that some values ​​need to be filled with 0

Comprehensive example:

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角，100%为圆形 */
    box-shadow: 10px 10px 5px #888888；
}

2. Background

background-size attribute: Specifies the size of the background image. (Important attributes)

Syntax: background-size: value

Value description:
(1) When there is only one value, the width is stretched, and the height will remain proportional. It can support px or percentage. The percentage refers to the width and height of the box itself
(2) When there are two values, the width and height will be stretched to the corresponding values ​​respectively, and may be deformed. It can support px or percentage. The percentage refers to the width and height of the box itself
(3) contain When the width or height of the image "touches" the edge of the box when scaling, the change will stop (width or height only need to satisfy one)
(4) On the basis of contain, ensure that there is no blank space. This is the effect of cover (both width and height need to be satisfied)

background-origin attribute: Specifies the positioning area of ​​the background image.

Syntax: background-origin: value

Value description:
(1) border-box: Ignore the border and tile directly from the starting point 0 of the border, 0 point
(2) padding-box: Default value, ignore padding and tile directly from the starting point of padding 0, 0 point
(3) content-box: Tiling starts from the content part and is related to padding

background-image attribute: Sets the background image of the element.

background-repeat attribute: Set whether and how to repeat the background image.

3. Text effect

text-align-last attribute: Set how to align the last line or the line immediately before the forced line break .

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。 

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。 

text-outline属性：规定文本的轮廓。 

text-overflow属性：规定当文本溢出包含元素时发生的事情。 

text-shadow属性：向文本添加阴影。 

text-wrap属性：规定文本的换行规则。 

word-wrap属性：允许对长的不可分割的单词进行分割并换行到下一行。

四、颜色与透明度

rgba（）

R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范围0~255，A的取值范围是0-1。

RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。

hsla（）

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1

例：

background-color: hsla(120,100%,50%,1);

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

The above is the detailed content of What new attribute styles are added to css3? Introduction to commonly used new features of css3. For more information, please follow other related articles on the PHP Chinese website!